React Hook 패턴 — 커스텀 훅으로 로직 재사용하기

커스텀 훅이란

use로 시작하는 함수에 로직을 캡슐화하여 컴포넌트 간 재사용합니다.

useDebounce

function useDebounce(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

useFetch

function useFetch(url: string) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  // ...
}