[React] Debounce 를 활용한 검색기능.

 

[ Debounce ]

연속된 이벤트에서 마지막 이벤트만 처리.

import React, { useRef } from "react";

const useDebounce = (callback, delay) => {
  const debounceTimer = useRef(null);

  return (...args) => {
    if (debounceTimer.current) {
      clearTimeout(debounceTimer.current);
    }

    debounceTimer.current = setTimeout(() => {
      callback(...args);
    }, delay);
  };
};

export default useDebounce;

debounceTimer 를 'useRef' 로 선언.

debounceTimer 의 값이 존재한다면(이전 타이머가 존재) delay 시간을 초기화.

이후 인자로 받은 delay 시간으로 타이머를 재설정. => 지정된 delay시간이 지나면 인자로 받은 callback함수 실행.

 

---

 

위의 useDebounce 훅을 검색기능에 활용.

import "./styles.css";
import "./useDebounce.js";
import { useEffect, useRef, useState } from "react";
import useDebounce from "./useDebounce.js";

const App = () => {
  const foodList = [
    "떡볶이",
    "삼겹살",
    "마라탕",
    "탕후루",
    "냉면",
    "짜장면",
    "삼계탕",
  ];
  const [list, setList] = useState([]);

  useEffect(() => {
    setList(foodList);
  }, []);

  // 검색
  const handleSearch = (e) => {
    const value = e.target.value;
    debounceSearch(value);
  };

  const debounceSearch = useDebounce((value) => {
    if (value) {
      setList(() =>
        foodList.filter(
          (item) => item.startsWith(value) || item.includes(value)
        )
      );
    } else {
      setList(foodList);
    }
  }, 400);

  return (
    <>
      <div className="App">
        <input onChange={handleSearch} placeholder="검색" />
        <ul>{list && list.map((item, idx) => <li key={idx}>{item}</li>)}</ul>
      </div>
    </>
  );
};
export default App;

 

=> input의 onChange이벤트 중 마지막 이벤트인 최종 검색어에 대해서만 리스트 변경 실행.

 ( input창에 검색어를 입력하면 일정시간 이후에 리스트가 변경.)

 

 

 

 

---

 

https://velog.io/@skawnkk/debounce-throttle

Debounce 와 Throttle 리액트로 구현하기

 

 

https://velog.io/@2ast/React-useDebounce%EC%99%80-useThrottle-%EB%A7%8C%EB%93%A4%EA%B8%B0

React) useDebounce와 useThrottle 만들기