<aside> 💡 Debounce에 대해서 알아보자 🔥🔥🔥🔥

</aside>

개요

개발을 진행하다보면 지나치게 자주 호출되는 함수를 방지하기 위해서 필요한 기술이다.

함수를 제한하여 서버의 지나친 사용을 방지하며, 그걸 방지 하기 위한 두 가지의 방법이 있다.

Debounce Throttle 이 두 가지의 방법이 존재한다. 이 중 Debounce 에 대해서 알아보자

Debounce

이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정 시간이 지난 후 함수를 호출하는 방법을 얘기한다.

이벤트가 계속 발생하여 함수의 호출이 잦다면 서버의 과부화가 생기기 때문에 이를 효과적으로 개발자 의도대로 제어할 수 있게 할 수 있다.

디바운스를 사용하여 연속적으로 발생하는 이벤트 중 마지막 이벤트를 기점으로 네트워크 요청을 하도록 개선할 수 있다.

검색 기능

검색기능에서 디바운스를 이용해서 효과적으로 이벤트를 제어할 수 있다.

기본 input 의 검색어를 입력할 때, 글자를 계속 작성하면 이벤트가 계속해서 일어난다.

디바운스 전

import { useEffect, useState } from "react";
import "./App.css";

function fetchDataFromServer(value) {
  if (!value) {
    return [];
  }

  console.log("서버로부터 데이터를 가져오는중...");

  const users = [
    { name: "김민수한", age: "15" },
    { name: "김민이한", age: "35" },
    { name: "김민한나", age: "11" },
    { name: "야수리", age: "27" },
    { name: "한사랑", age: "29" },
    { name: "마이클", age: "34" },
    { name: "최면", age: "73" },
  ];
  
  return users.filter((user) => user.name.startsWith(value));
}

function App() {
  const [input, setInput] = useState("");
  const [result, setResult] = useState([]);
  
  useEffect(() => {
    const users = fetchDataFromServer(input);
    setResult(users);
  }, [input]);
  
  return (
    <div className="container">
      <div className="search-container">
        <input
          type="text"
          placeholder="여기다 검색하세요"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <ul>
          {result.map((user) => (
            <li key={user.name}>
              <span>{user.name}</span>
              <span>{user.age}세</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;