리액트 개발자를 위한 필수 커스텀 훅 10가지

 

 

리액트 개발을 하다 보면 반복적인 로직을 줄이고, 효율적으로 상태를 관리하는 것이 중요해요. 특히, useState와 useEffect만으로는 해결하기 어려운 부분이 많죠. 그래서 나온 게 바로 커스텀 훅(Custom Hooks)이에요! 😎

이 글에서는 개발자들이 자주 사용하는 10가지 필수 커스텀 훅을 소개할게요. 직접 구현할 수도 있고, useHooks-ts 같은 라이브러리를 사용할 수도 있어요. (npm 홈페이지에서 usehook-ts 바로가기)

 

순위	훅 이름	기능
1	useInterval	일정 시간 간격으로 함수 실행
2	useCopyToClipboard	텍스트를 클립보드에 복사
3	useIntersectionObserver	요소가 화면에 들어오거나 나갈 때 감지
4	useHover	마우스 호버 감지
5	useWindowSize	창 크기 실시간 감지
6	useMediaQuery	미디어 쿼리 감지 (반응형)
7	useEventListener	이벤트 리스너 쉽게 추가
8	useDebounceValue	값 변경을 지연 (API 호출 최적화)
9	useLocalStorage	상태를 로컬 스토리지에 저장

 

1️⃣ useInterval: 일정 간격으로 함수 실행

import { useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export default useInterval;

💡 활용 예시: 실시간 시계, 자동 새로고침, 주기적인 데이터 업데이트 등에 활용 가능!

 

2️⃣ useCopyToClipboard: 클립보드 복사 기능

이 훅을 사용하면 버튼 클릭 한 번으로 텍스트를 복사할 수 있어요. copied 상태를 활용하면 복사 성공 여부도 알 수 있어요.

import { useState } from 'react';

function useCopyToClipboard() {
  const [copied, setCopied] = useState(false);

  const copy = (text) => {
    navigator.clipboard.writeText(text).then(() => setCopied(true));
  };

  return { copied, copy };
}

💡 활용 예시: 코드 스니펫 복사 버튼, 프로모션 코드 복사 등

 

3️⃣ useIntersectionObserver: 요소가 화면에 나타나는지 감지

이 훅을 사용하면 무한 스크롤, 레이지 로딩, 애니메이션 트리거 같은 기능을 쉽게 구현할 수 있어요.

import { useState, useEffect } from 'react';

function useIntersectionObserver(ref, options) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIntersecting(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => observer.disconnect();
  }, [ref, options]);

  return isIntersecting;
}

💡 활용 예시: 스크롤에 따라 이미지 로드, 무한 스크롤 구현, 특정 요소가 보일 때 애니메이션 적용

이 외에도 창 크기 감지 (useWindowSize), 반응형 미디어 쿼리 (useMediaQuery), 이벤트 리스너 추가 (useEventListener), API 호출 최적화 (useDebounceValue), 로컬 스토리지 (useLocalStorage) 등 다양한 훅이 있어요.

 

커스텀 훅을 활용하면 코드의 재사용성이 올라가고, 깔끔한 코드를 유지하는 데 도움을 줘요. 리액트 개발을 한다면 한 번쯤 사용해 보세요! 🚀