React Hook: 함수 컴포넌트의 상태와 로직 재사용

import { useEffect, useState } from 'react';

function Clock() {
  const [now, setNow] = useState(() => new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  return <time>{now.toLocaleTimeString()}</time>;
}

훅의 동작 원리와 호출 규칙

React는 컴포넌트 인스턴스에 해당하는 파이버(Fiber) 노드에 훅 상태를 연결 리스트 형태로 저장하고, 렌더링 때마다 호출 순서에 따라 저장된 값을 차례로 꺼내 온다. 훅 호출에는 이름 같은 식별자가 없으므로 호출 순서가 곧 식별자 역할을 한다. 여기서 두 가지 규칙이 나온다. 첫째, 훅은 조건문, 반복문, 중첩 함수 안이 아니라 컴포넌트 최상위에서만 호출해야 한다. 둘째, 훅은 함수 컴포넌트나 다른 커스텀 훅 안에서만 호출해야 한다. 조건에 따라 훅 호출을 건너뛰면 다음 렌더링에서 순서가 어긋나 엉뚱한 상태가 연결되는 버그가 생긴다.

커스텀 훅으로 로직 재사용

커스텀 훅은 use로 시작하는 이름을 가진 일반 함수이며, 내부에서 다른 훅을 호출한다는 점이 유일한 특징이다. 다음은 입력값이 잠시 멈춘 뒤에만 반영되는 디바운스(debounce) 훅의 예시다.

import { useEffect, useState } from 'react';

function useDebouncedValue(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

주의할 점은 커스텀 훅이 공유하는 것은 상태 자체가 아니라 상태를 다루는 로직이라는 사실이다. 훅을 호출하는 컴포넌트마다 독립적인 상태가 새로 만들어지므로, 여러 컴포넌트가 같은 값을 공유해야 한다면 컨텍스트나 외부 스토어가 필요하다.

주의할 점

• 의존성 배열을 빠뜨리거나 잘못 채우면 오래된 값을 참조하는 스테일 클로저(stale closure) 문제가 생긴다. 린트 규칙 exhaustive-deps를 존중하는 편이 안전하다.
• useMemo와 useCallback은 최적화 수단이지 정확성 수단이 아니다. 성능 측정 없이 모든 값을 감싸면 코드만 복잡해진다.
• 렌더링 중에 계산할 수 있는 파생 값을 useEffect와 별도 상태로 관리하면 렌더링이 한 번 더 일어난다. 파생 값은 렌더링 중에 바로 계산한다.
• React 18의 StrictMode는 개발 모드에서 이펙트를 마운트 직후 한 번 더 실행한다. 이를 정리 함수가 올바른지 검증하는 기회로 삼는다.

면접에서 이렇게 물어본다

• 훅을 조건문 안에서 호출하면 안 되는 이유를 React 내부 저장 구조와 연결해 설명해 보라.
• useEffect의 의존성 배열이 빈 배열일 때, 아예 없을 때, 값이 있을 때 실행 시점이 어떻게 다른가.
• 커스텀 훅을 여러 컴포넌트에서 사용할 때 상태가 공유되는가, 로직만 공유되는가.
• 클래스 컴포넌트의 생명주기 메서드는 함수 컴포넌트에서 어떤 훅 조합으로 대체되는가.
• useMemo와 useCallback을 언제 도입하고 언제 도입하지 말아야 하는가.