실무에서 두루 쓰는 React 커스텀 Hook 4가지

TL;DR#

• 대부분의 프로젝트에서 두루 재사용할 수 있는 React 커스텀 Hook 네 가지를 코드와 함께 정리했습니다.
• useToggle은 boolean 상태 전환, useTimeout은 setTimeout 관리, useDebounce는 디바운스 처리, useUpdateEffect는 초기 렌더링 제외 실행을 담당합니다.
• 각 Hook은 그대로 복사해 쓸 수 있도록 전체 구현을 함께 실었습니다.

useToggle#

javascript
복사
import { useState } from "react";

const useToggle = (deafaultValue: boolean): [boolean, () => void] => {
  const [state, setState] = useState(deafaultValue);

  const toggle = () => {
    setState((prev) => !prev);
  };

  return [state, toggle];
};

export default useToggle;

모달처럼 boolean 상태를 계속 전환해야 하는 상황에서 유용한 Hook입니다.

useTimeout#

javascript
복사
import { useCallback, useEffect, useRef } from "react";

const useTimeout = (callback: () => void, delay: number) => {
  const timeoutRef = useRef<number>();
  const callbackRef = useRef<() => void>(callback);

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

  const set = useCallback(() => {
    if (!callbackRef.current) return;
    timeoutRef.current = setTimeout(callbackRef.current, delay);
  }, [delay]);

  const clear = useCallback(() => {
    clearTimeout(timeoutRef.current);
  }, []);

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set]);

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear]);

  return { reset, clear };
};

export default useTimeout;

일정 시간이 지난 뒤에 함수를 실행하고 싶을 때 사용합니다. 순수 자바스크립트 메서드인 setTimeout을 위한 Hook이라고 보면 됩니다.

이 Hook을 쓰면 setTimeout을 사용할 때마다 매번 clearTimeout 코드를 따로 작성하지 않아도 됩니다.

useDebounce#

javascript
복사
import { useEffect } from "react";
import useTimeout from "./useTimout";

const useDebounce = (
  callback: () => void,
  delay: number,
  dependencies: any[]
) => {
  const { reset, clear } = useTimeout(callback, delay);

  useEffect(reset, [...dependencies]);

  // * 첫 렌더때 클리어를 해줘야 처음에 콜백이 실행이 안됨.
  useEffect(clear, []);
};

export default useDebounce;

이벤트가 끝날 때까지 일정한 지연 시간을 두는 Hook입니다. 무언가를 계속 하고 있는 동안에는 아무 일도 일어나지 않고, 이벤트를 마친 뒤 지연 시간이 지나야 함수가 실행됩니다.

콜백, 지연 시간, 의존성(dependencies)만 넘겨주면 됩니다. 불필요한 실행을 줄여 앱 성능에도 도움이 됩니다.

useUpdateEffect#

javascript
복사
import { useEffect, useRef } from "react";

const useUpdateEffect = (callback: () => void, dependencies: any[]) => {
  const firstRender = useRef<boolean>(true);

  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }

    return callback();
  }, dependencies);
};

export default useUpdateEffect;

useEffect로 작성한 코드를 초기 렌더링에서는 실행하고 싶지 않을 때가 있습니다. 이 Hook을 사용하면 그렇게 할 수 있습니다.

boolean 타입의 useRef로 초기 렌더링에서만 실행을 막고, 그 이후에는 값을 재할당한 뒤 콜백 함수를 실행합니다.