React 19.2 커스텀 훅 네이밍 규칙 및 인식 원리

728x90

1️⃣ 문제 요약

// 잘못된 예시 
const { loading, menuRole } = UseMenuRole(); // 대문자로 시작

위와 같이 훅 이름을 대문자로 시작하면 React는 이 함수를 컴포넌트로 인식하지 훅으로 인식하지 않습니다.

그 결과,

useState, useEffect 등의 내부 상태 변화가 React 렌더링 사이클에 반영되지 않음
setState()가 실행돼도 화면이 갱신되지 않음
내부 상태(menuRole, loading)는 변하지만 UI는 그대로 멈춘 상태

이런 현상이 발생합니다.

2️⃣ React의 훅 인식 규칙

React는 내부적으로 훅 호출을 추적할 때 다음과 같은 규칙을 사용합니다.

	React가 인식하는 대상	예시
컴포넌트	대문자로 시작하는 함수	function App(), function SomePage()
훅	use로 시작하는 함수	useState, useEffect, useUser, useMenuRole

따라서 커스텀 훅을 작성할 때는 반드시
👉 use로 시작하는 이름을 사용해야 React가 인식하고 상태를 추적합니다.

3️⃣ 올바른 예시

// ✅ 커스텀 훅 정의
export const useMenuRole = () => {
  const [menuRole, setMenuRole] = useState(0);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ... 로직
  }, []);

  return { menuRole, loading };
};

// ✅ 훅 사용
function SomePage() {
  const { menuRole, loading } = useMenuRole();

  if (loading) return <div>로딩중...</div>;
  return <div>메뉴 권한: {menuRole}</div>;
}

useMenuRole()을 호출한 위치를 기억하고, 내부의 useState / useEffect 변경 시 자동으로 해당 컴포넌트를 리렌더링합니다.

4️⃣ 잘못된 예시

// ❌ 대문자로 시작한 훅
export const UseMenuRole = () => {
  const [menuRole, setMenuRole] = useState(0);
  ...
};

// ❌ 훅 호출
function SomePage() {
  const { menuRole, loading } = UseMenuRole(); // ❌ React는 이걸 훅으로 인식하지 않음
  ...
}

React는 이 코드를 “일반 함수 호출” 로 처리하기 때문에 setMenuRole() 호출 시 컴포넌트가 리렌더되지 않습니다.

5️⃣ 정리 요약

항목설명

✅ 커스텀 훅 네이밍	use로 시작 (소문자)
🚫 잘못된 네이밍	대문자 시작 (UseSomething)
❗ 이유	React 훅 트래킹 규칙: use prefix 필수
🔁 증상	state는 변하지만 렌더링 안 됨
🩹 해결	훅 이름을 useMenuRole처럼 소문자 use로 시작하게 변경

📎 결론

React 훅은 반드시 use로 시작해야 React가 내부적으로 상태 변경을 추적하고 리렌더링을 수행한다.
대문자로 시작하면 단순 함수로 처리되어 상태 변화가 UI에 반영되지 않는다.