React에서 useDebounce와 검색 최적화

React에서 UI를 구현하다 보면 사용자의 입력에 따라 실시간으로 결과를 업데이트해야 하는 경우가 많다. 예를 들어, 사용자가 검색어를 입력하면 해당 검색어에 대한 결과를 즉시 보여주는 기능이 그런 경우다. 이럴 때 매번 키보드 키가 눌릴 때마다 API 요청을 하면 서버에 과부하가 발생할 수 있고, 응답 시간도 길어져 사용자 경험이 떨어질 수 있다.

이런 문제를 해결하기 위한 방법 중 하나로 debounce 기법이 있다. debounce란, 이벤트가 발생한 후 일정 시간 동안 추가적인 이벤트가 발생하지 않을 때 한 번만 핸들러 함수를 호출하는 것을 의미한다. 즉, 사용자의 연속적인 요청을 그룹화해서 마지막 요청만 처리하는 것이다.

React에서는 useDebounce라는 커스텀 훅을 만들어 debounce 기능을 구현할 수 있다.

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]);

  return debouncedValue;
}

위 useDebounce 훅은 value와 delay 값을 인자로 받아서 debouncedValue라는 상태값을 반환한다. value 값이 변경될 때마다 useEffect 내부의 setTimeout 함수로 설정된 딜레이 후에 debouncedValue 상태값을 업데이트한다.

그리고 다음과 같이 useDebounce 훅을 활용해서 실제로 검색 기능을 구현할 수 있다:

import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [text, setText] = useState('');
  const debouncedSearchTerm = useDebounce(text, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 여기서 API 호출 등 비동기 작업 수행
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      placeholder="Search..."
      onChange={(e) => setText(e.target.value)}
    />
   );
}

export default SearchInput;

위의 SearchInput 컴포넌트에서는 사용자가 입력한 텍스트를 debouncedSearchTerm에 저장하고, 이 값이 변경될 때마다 API 요청을 수행한다. 이렇게 하면 사용자가 입력을 멈춘 후 500ms가 지나면 한 번만 API 요청을 수행하게 되므로 불필요한 네트워크 요청을 줄일 수 있다.

이런 식으로 useDebounce 훅은 React에서 검색과 같은 실시간 기능을 구현할 때 성능 최적화를 돕는 매우 유용한 도구다.