[React] useThrottle과 useDebounce에 대해서 알아보자

React 애플리케이션에서 자주 사용하는 useThrottle와 useDebounce는 사용자 인터페이스 성능을 최적화하는 데 유용한 커스텀 훅이다.

스크롤, 키보드 입력, 리사이즈 등 이벤트가 자주 발생하는 상황에서 불필요한 호출을 줄여 부드러운 사용자 경험을 제공하는 것이 목적이다

먼저 useThrottle과 useDebounce에 대해 알기전에 커스텀 훅에 대하여 알아야한다.

커스텀 훅이란?

커스텀 훅(Custom Hook) 은 React에서 상태 관리 및 로직을 재사용 가능하도록 만드는 함수다. 일반적으로 useState, useEffect 같은 내장 훅을 활용해 특정 기능을 캡슐화하고 이를 필요할 때마다 호출하여 사용할 수 있다. 예를 들어, useThrottle와 useDebounce 같은 커스텀 훅을 통해 이벤트 빈도를 제한함으로써 애플리케이션 성능 최적화를 할 수 있다.
또한 커스텀 훅은 작성 규칙을 따라야한다.

커스텀 훅 작성 규칙

“use”로 시작하기

모든 커스텀 훅 이름은 use로 시작해야 한다. React는 이를 통해 훅으로 인식하여 호출 규칙을 적용한다.

React 훅 규칙 준수

커스텀 훅도 일반 훅과 마찬가지로 조건문, 반복문 내부에서는 호출할 수 없고 최상위 레벨에서만 호출해야 한다.

React 훅 내부 사용

커스텀 훅은 다른 리액트 훅을 내부에서 호출할 수 있다. 예를 들어 useThrottle 훅은 내부에서 useState, useEffect 등을 사용할 수 있다.

useThrottle이란?

useThrottle는 특정 함수 호출을 제한하여 지정한 시간 간격 내에서는 최초 실행 후 추가 호출을 무시하는 커스텀 훅이다.
스크롤 이벤트와 같이 매우 빠르게 발생하는 이벤트의 빈도를 조절하고 싶을 때 사용된다.
ex) 스크롤에 따른 애니메이션 효과, 리사이즈 이벤트 등.

import { useState, useEffect } from 'react';

function useThrottle(value, limit) {
  const [throttledValue, setThrottledValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setThrottledValue(value);
    }, limit);

    return () => clearTimeout(handler);
  }, [value, limit]);

  return throttledValue;
}

useDebounce

useDebounce는 함수 호출을 지연시키고, 지정한 시간 내에 추가 호출이 발생하지 않을 때에만 실행한다.
주로 사용자가 빠르게 입력하는 검색 필드에서 입력 완료 후에만 검색 요청을 보낼 때 유용하게 쓰인다.
ex) 검색 창, 필터와 같은 입력 필드 처리.

import { useState, useEffect } from 'react';

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

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

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

  return debouncedValue;
}

useThrottle와 useDebounce의 차이점

두 훅은 모두 이벤트 호출 횟수를 제어한다는 공통점이 있지만, 동작 방식과 쓰이는 곳이 다르다.

실행 방식:

• useThrottle: 지정한 시간 동안 반복 호출을 제한하고 최초 호출 후 해당 시간 내 추가 호출을 무시한다.
• useDebounce: 지정한 시간 동안 추가 호출이 없을 때만 실행하여 사용자의 행동이 멈출 때까지 기다린다.

  주요 용도:

• useThrottle: 스크롤, 리사이즈 이벤트와 같이 이벤트가 지속적으로 발생할 때.
• useDebounce: 검색 입력 필드와 같이 사용자가 연속해서 입력하는 이벤트에 반응할 때.

결론

useThrottle와 useDebounce는 모두 React에서 성능을 최적화하는 커스텀 훅이다. 이 두 훅의 차이를 이해하고 상황에 맞게 적절히 사용하는 것이 중요하다. 간단히 요약하면, 빠르게 반복 발생하는 이벤트에는 useThrottle를, 사용자의 입력이 끝난 후 동작해야 하는 경우에는 useDebounce를 사용하는 것이 좋다.