사용자 정의 훅을 만드는 목적은 무엇인가요?

커스텀 훅(custom hook) 은 use로 시작하는 이름의, 내부에서 다른 훅을 사용하는 자바스크립트 함수입니다. 여러 컴포넌트에 흩어진 상태 관련 로직을 하나로 추출해 재사용하는 것이 핵심 목적입니다.

왜 만드나요?

훅 이전에는 로직 재사용을 위해 HOC나 render props 같은 패턴을 썼는데, 컴포넌트 트리가 깊어지고 복잡해지는 단점이 있었습니다. 커스텀 훅은 로직만 깔끔하게 분리합니다.

// 창 너비를 추적하는 로직을 훅으로 추출
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
 
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
 
  return width;
}
 
// 어느 컴포넌트에서든 한 줄로 재사용
function Component() {
  const width = useWindowWidth();
  return <p>{width}px</p>;
}

목적을 정리하면 ① 로직 재사용, ② 관심사 분리(컴포넌트는 UI에 집중), ③ 가독성·테스트 용이성 향상입니다.

규칙: 공유되는 것은 로직이지 상태가 아니다

커스텀 훅을 여러 컴포넌트에서 써도 상태는 공유되지 않습니다. 훅을 호출할 때마다 그 안의 useState·useEffect는 독립적으로 새로 생성됩니다. 공유되는 것은 “로직(코드)“일 뿐입니다. 상태를 진짜 공유하려면 Context나 전역 상태가 필요합니다.

훅의 규칙

커스텀 훅도 일반 훅과 같은 규칙을 따라야 합니다.

• 이름이 반드시 use로 시작해야 합니다(린트와 리액트가 훅으로 인식).
• 훅은 최상위에서만 호출합니다. 조건문·반복문·중첩 함수 안에서 호출하면 안 됩니다(호출 순서가 매 렌더 일정해야 하므로).