🧐상황

프로젝트의 검색 기능을 한 글자씩 입력이 될 때마다 그 값으로 API 요청을 하도록 구현했다.
필요 이상의 요청이 발생할 것이라 생각했었고, 실제로 체감 시간도 길었다.💀 일단 마감 날짜를 지키느라 이대로 구현하고 리팩토링 기간 동안 성능 개선을 해보기로 함❗
찾아보니, Debounce 기능을 적용해 요청을 줄이는 방법이 있었고, 프로젝트에 적용해보기로 결정🤩

---

🔎Debounce

• 사용자의 입력과 같은 이벤트 발생 시 일정 시간 동안 추가적인 이벤트 발생을 제어하는 기술
• 검색 기능으로 예를 들면,
  사용자가 검색어를 입력하는 동안에 매 입력마다 검색을 실행하지 않고, 입력이 끝난 후 일정 시간 동안 추가 입력이 없다면 검색을 실행

💡사용 방법

• useEffect를 사용하여 입력값 query가 변경될 때마다 디바운스를 적용하여 API 요청 지연시킴

• 페이지 내에서 사용

// DebouncedSearch.jsx
import React, { useState, useEffect } from 'react';

function DebouncedSearch() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  
  // 입력 값이 변경될 때마다 타이머 설정
  useEffect(() => {
    const delayDebounceTimer = setTimeout(() => {
      // 여기에 API 요청 코드 넣으면 됨
      // 받아온 값을 setSearchResults에 저장
    }, 1000); // 1s 디바운스 지연 시간

    // 이전에 설정한 타이머를 클리어하여 디바운스 취소
    return () => clearTimeout(delayDebounceTimer);
  }, [query]);

  function handleInputChange(event) {
    setQuery(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Search"
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default DebouncedSearch;

• custom hook으로 사용

// useDebounce.jsx
import { useEffect, useState } from 'react';

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(()=>{
    const timer = setTimeout(()=>{
      setDebouncedValue(value)
    }, delay)
    return () => clearTimeout(timer)
  }, [value])

  return debouncedValue
}

// DebouncedSearch.jsx
import React, { useState } from 'react';
import useDebounce from './useDebounce'; // useDebounce 커스텀 훅 임포트

function DebouncedSearch() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  const debouncedQuery = useDebounce(query, 1000); // 1s 디바운스 지연 시간

  useEffect(() => {
    // 여기에 API 요청 코드 넣으면 됨
  	// 받아온 값을 setSearchResults에 저장
  }, [debouncedQuery]);

  function handleInputChange(event) {
    setQuery(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleInputChange}
        placeholder="Search"
      />
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default DebouncedSearch;

💡프로젝트 Debounce 적용 X

tadak 검색 시 API 요청
t ➡️ ta ➡️ tad ➡️ tada ➡️ tadak

• 콘솔
  tadak 한 글자씩 입력 할 때마다 요청 보내짐
  
• 네트워크
  전체 요청 472개, 완료까지 약 23.9초
  

💡프로젝트 Debounce 적용 O

delay를 1초로 설정하고 tadak 검색 시 API 요청
tadak ➡️ 1초동안 입력 없을 시 요청

• 콘솔
  tadak 이후 1초동안 추가 입력이 없을 때 한번만 요청 보내짐
  

• 네트워크
  전체 요청 12개, 완료까지 약 4.8초
  

---

요청 횟수가 눈에 띄게 줄었고,
검색 결과를 화면에 보여줄때까지의 시간도 현저히 준 것을 볼 수 있다👏🏻❗
Debounce 기능은 검색 말고도 브라우저 윈도우 크기 리사이징, 자동완성, 지도 확대·축소 등 많은 곳에 사용된다고 하니 다른 프로젝트에서도 유용하게 적용할 수 있을거같다🤗