리액트 검색창 디바운스 구현

앨리스 코딩 실시간 강의를 들으면서 디바운스에 대해 알게 되었다. 개념에 대해 정리하면서 내가 만드는 프로젝트에도 적용하면 성능 향상에 도움이 될것같아 커스텀훅을 만들어서 디바운스 표현을 구현해 보았다.

UseDebounce.js

import { useEffect, useState } from "react";

function useDebounce(value, delay = 1000) {
  const [debounceVal, setDebounceVal] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceVal(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);
  return debounceVal;
}

export default useDebounce;

먼저 설명을 하자면 useDebounce라는 커스텀훅에 첫번째 인자값으로 검색 input의 value값을 받아온다. 두번째 인자값은 지연시간을 세팅한다. debounceVal을 선언해주고 useEffect를 통해 value값과 delay값이 변할때만 함수가 호출될수 있게끔한다.
settimeout을 이용하여 delay시간에 한번만 debounceval가 호출되게끔 하고 cleartimeout으로 인하여 settimeout을 종료한다. 그런다음 debounceval을 리턴하게 되면 된다.

Main.js

import useDebounce from "../CustomHook/useDebounce";


  const debounceValue = useDebounce(searchTerm);
    const [searchTerm, setSearchTerm] = useState("");
  // 디바운스 표현을위한 커스텀훅 호출
  
  useEffect(() => {
    Filterhandler();
  }, [debounceValue]);

            <MainSearchInput
              type="text"
              placeholder="🍳 제목검색.."
              value={searchTerm}
              onChange={(e) => {
                e.preventDefault();
                SearchOnchange(e.target.value);
              }}
            ></MainSearchInput>

메인 페이지에서는 만든 디바운스 훅을 가져와서 input에서 받은 value값을 넣어주고, 검색시에 발동하게끔만든 useEffect에 deboucevalue가 변경될때만 함수가 호출될수 있도록 하면 끝이다.

결과는 아래와 같이 한글자 한글자 입력할때마다 api를 호출하는게 아닌 한번만 api를 호출하는것을 볼수 있다!!

참고문헌

유튜브강의