[React] 검색 디바운싱(Debouncing) 적용

디바운싱(debouncing)을 적용하여 불필요한 상태 변경과 렌더링을 줄이고, 필요한 경우 커스텀 훅(custom hook)을 사용하는 방법이 포함됩니다.

기존 방식

// SearchBar.js
function SearchBar({ onChange }) {
  return (
    <input
      type="text"
      placeholder="강의 검색..."
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

 

디바운싱(Debouncing) 적용

사용자가 입력할 때마다 즉시 상태를 업데이트하는 대신, 디바운싱을 적용하여 연속적인 입력에 대한 상태 업데이트를 지연시킬 수 있습니다. 이 방법은 연속적인 입력에서 발생하는 불필요한 렌더링을 줄여 성능을 향상시킵니다.

 

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;
}

function SearchBar({ onChange }) {
  const [inputValue, setInputValue] = useState("");
  const debouncedSearchTerm = useDebounce(inputValue, 500); // 500ms 지연

  useEffect(() => {
    onChange(debouncedSearchTerm);
  }, [debouncedSearchTerm, onChange]);

  return (
    <input
      type="text"
      placeholder="강의 검색..."
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
}

 

 

이 코드에서 useDebounce 커스텀 훅은 지정된 지연 시간 후에만 입력값을 onChange에 전달합니다. 사용자가 타이핑을 멈추고 지정된 시간이 지나면 입력값이 업데이트됩니다.