[React.js] use-debounce 패키지

use-debounce 패키지

들어가며

• 리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트 되지 않도록 해주는 @use-debounce@ 패키지에 대해 정리해본다.

 

use-debounce

개념

• 리액트(React.js)와 Next.js 같은 환경에서 컴포넌트가 자주 업데이트되지 않도록 특정 동작을 디바운스(Debounce) 하기 위해 사용할 수 있는 유틸리티 훅
• 사용자가 입력을 빠르게 반복할 때 불필요한 리렌더링이나 API 호출을 방지하는 데 유용하다.

 

디바운스(Debounce)

• 사용자가 마지막으로 발생한 이벤트 이후, 일정 시간 동안 추가 이벤트가 발생하지 않았을 때만 함수를 실행하는 패턴
• 주로 API 요청이나 리소스가 많이 필요한 이벤트 처리에 사용된다.
  
  • 검색창에서 사용자가 입력할 때마다 API 요청을 보내지 않고, 입력이 멈춘 후에만 요청 전송
  • 스크롤 이벤트와 같이 연속된 이벤트 발생 시 성능 저하 방지

 

설치하기

$ npm install use-debounce    # yarn add use-debounce

 

사용 방법

import { useDebounce } from 'use-debounce';

const [debouncedQuery] = useDebounce(value, delay);

 

• 첫 번째 인자(@value@) : 디바운스할 값
• 두 번째 인자(@delay@): 딜레이 시간
• @value@가 변경될 때마다 일정 시간 동안 기다린 후, 값이 변경되지 않은 상태면 최종 값이 업데이트된다.

 

사용 예제

import { useDebounce } from 'use-debounce';
import { useState, useEffect } from 'react';

export default function SearchComponent() {
  const [query, setQuery] = useState('');
  const [debouncedQuery] = useDebounce(query, 500);  // 500ms Delay

  useEffect(() => {
    if (debouncedQuery) {
      console.log('API 호출: ', debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input
      type="text"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="검색어를 입력하세요"
    />
  );
}

 

참고 사이트

use-debounce