훅 쓰다가 가장 자주 터지는 포인트를 정리했다.

1. 훅의 규칙 2가지
2. 왜 훅 호출 순서가 중요한지
3. 중복 로직을 줄이는 커스텀 훅 패턴

---

1. 훅은 무조건 지켜야 하는 규칙이 있다

리액트 훅은 편한 대신, 규칙을 어기면 바로 꼬인다.

• 훅은 항상 최상위(top-level)에서만 호출
• 훅은 리액트 함수 컴포넌트 또는 커스텀 훅 안에서만 호출

1-1. 최상위에서만 호출해야 하는 이유

처음엔 “조건문 안에서 한 번쯤 써도 되지 않나?” 싶었는데, 실제로는 안 된다.

리액트는 훅을 “이름”이 아니라 “호출 순서”로 구분해서 상태를 매칭한다.
그래서 어떤 렌더에서는 useEffect가 실행되고, 어떤 렌더에서는 조건문 때문에 건너뛰면 순서가 밀려버린다.

function BadComponent({ visible }: { visible: boolean }) {
  const [count, setCount] = useState(0);

  if (visible) {
    // 잘못된 패턴: 조건부 훅 호출
    useEffect(() => {
      console.log("visible");
    }, []);
  }

  return <button onClick={() => setCount((v) => v + 1)}>{count}</button>;
}

이런 코드는 렌더마다 훅 개수/순서가 달라질 수 있어서 위험하다.

1-2. 리액트 함수 안에서만 호출해야 하는 이유

훅은 일반 유틸 함수에서 호출하면 안 된다.
리액트 렌더링 컨텍스트 안에서만 의미가 있기 때문이다.

• 가능: 함수 컴포넌트 내부
• 가능: useSomething 형태의 커스텀 훅 내부
• 불가: 일반 함수, 클래스, 이벤트 외부 임의 코드

---

2. 훅 규칙을 지키면서 조건 분기하는 방법

조건이 필요하면 “훅 호출 자체”가 아니라 “훅 내부 로직”에서 분기하면 된다.

useEffect(() => {
  if (!visible) return;
  console.log("visible일 때만 실행");
}, [visible]);

이렇게 하면 훅 호출 순서는 고정되고, 실행 로직만 안전하게 분기할 수 있다.

지키지 않을 경우 개발자도구에서 관련 에러를 만날 수 있다.

---

3. 중복 코드를 줄이는 커스텀 훅

컴포넌트 여러 개에서 비슷한 입력 상태 로직을 반복할 때가 많다.
이때 로직만 뽑아 재사용하는 게 커스텀 훅이다.

규칙은 하나만 기억하면 됐다.

• 이름은 반드시 use로 시작

예시로 useInput을 정리해봤다.