커스텀 훅 컬렉션: 실전에서 바로 쓰는 React 훅

TUTORIAL

useToggle, useLocalStorage, useDebounce 등 실무에서 자주 사용하는 React 커스텀 훅 패턴 모음입니다.

럿지 AI 팀

2025-01-13

15분

커스텀 훅의 힘

반복되는 로직을 훅으로 추출하여
재사용성과 가독성을 높입니다.

// 커스텀 훅의 규칙
function useCustomHook() {
  // 1. 이름은 use로 시작
  // 2. 다른 훅 호출 가능
  // 3. 상태/로직 캡슐화
  // 4. 재사용 가능한 값 반환

  const [state, setState] = useState();
  useEffect(() => { /* ... */ }, []);

  return { state, setState };
}

useToggle

function useToggle(initial = false) {
  const [value, setValue] = useState(initial);

  const toggle = useCallback(() => {
    setValue(v => !v);
  }, []);

  const setTrue = useCallback(() => setValue(true), []);
  const setFalse = useCallback(() => setValue(false), []);

  return { value, toggle, setTrue, setFalse };
}

// 사용
const { value: isOpen, toggle } = useToggle();
<button onClick={toggle}>{isOpen ? '닫기' : '열기'}</button>

useLocalStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    if (typeof window === 'undefined') return initialValue;
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// 사용
const [theme, setTheme] = useLocalStorage('theme', 'dark');

useDebounce

function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// 검색어 디바운싱
const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 500);

useEffect(() => {
  fetchResults(debouncedSearch);
}, [debouncedSearch]);

자주 쓰는 커스텀 훅

useMediaQuery

반응형 브레이크포인트 감지

useClickOutside

외부 클릭 감지 (모달, 드롭다운)

usePrevious

이전 상태값 보존

useWindowSize

윈도우 크기 실시간 추적

useIntersectionObserver

뷰포트 진입 감지 (무한스크롤)

useFetch

데이터 fetching 추상화

useToggle

useLocalStorage

useDebounce

자주 쓰는 커스텀 훅

추천 라이브러리

관련 태그