Debounce 함수란?

Debounce 함수는 특정 시간 동안 입력이 없을 때, 마지막 입력 이후에 한 번만 이벤트를 실행하도록 하는 함수이다. 이는 사용자 입력과 같이 연속적인 이벤트가 발생하는 경우, 이벤트의 발생 빈도를 제한하고 성능을 개선할 수 있다.

JavaScript에서 debounce 함수는 대개 setTimeout 함수를 사용하여 구현된다.

주로 언제 사용 되나?

• 자동완성
  사용자가 입력 필드에 글자를 입력하는 동안에는 매번 자동완성 기능을 실행하지 않고, 입력이 일정 시간 동안 없을 때에만 자동완성을 수행하는 경우가 있다. 이는 사용자가 타이핑 중에는 자동완성 결과에 방해받지 않게 하면서, 입력이 멈춘 후에만 자동완성을 제공하여 유용한 기능을 제공할 수 있다.

예시

import React, { useState } from 'react';

const Debounce = (func, delay) => {
  let timerId;

  return function (...args) {
    clearTimeout(timerId);

    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const debouncedSearch = Debounce((searchTerm) => {
    // 검색 요청이나 처리 로직을 수행합니다.
    console.log('Searching for:', searchTerm);
    // 예를 들어, 서버에 요청을 보내 검색 결과를 가져올 수 있습니다.
  }, 500);

  const handleSearch = () => {
    debouncedSearch(searchTerm);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleInputChange} />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

export default SearchBar;