프로젝트 SPAM #8 검색 debounce 적용

검색 기능 구현할 때 매번 하는 고민이 있다. 버튼 누르면 랜더링 되게 할건지, 실시간 키 입력 할 때마다 랜더링 할건지. 저번 프로젝트에서는 버튼으로 했다면 이번에는 후자를 선택해봤다. 그런데, 키 입력할 때마다 화면이 파도치듯 요동쳐대니 영 꼴보기가 싫다. 무엇보다 리소스 낭비가 너무 심하다. 누르는 키 값마다 통신 요청을 보낼 게 아니라 딜레이를 줘서 마지막 키 입력 후 n초 내에 키 입력이 없어야 보내면 어떨까 단순하게 생각했다. 해당 기능은 이미 당연히 있겠지만 써보거나 기억할만큼 중요하게 인식한적이 없어서 어떤 걸 써야할지 검색하고 적용해보았다.

 

 

---

◇ 데바운스(debounce)란?

데바운스(debounce)는 자동화 프로그램에서 주로 사용되는 개념으로, 버튼을 누르거나 키보드를 입력할 때 여러 번 호출되는 함수를 일정 시간 동안 한 번만 호출하도록 제어하는 기술이다. 이는 인터넷에서 검색어를 입력하는 경우에 자주 사용되며, 사용자가 입력하는 문자열을 실시간으로 검색 결과로 보여주기 위해 사용된다.

 

◇ 사용법

React에서 debounce를 구현하는 방법은 다양하다. TypeScript와 함께 사용하는 가장 일반적인 방법 중 하나를 살펴보자.

import React, { useState } from 'react';
import debounce from 'lodash/debounce';

const SearchBar: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState<string>('');

  const handleSearch = debounce((value: string) => {
    console.log(`Searching for ${value}`);
    // API 호출 또는 검색 결과 업데이트 등
  }, 500);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setSearchTerm(value);
    handleSearch(value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} value={searchTerm} />
    </div>
  );
};

export default SearchBar;

위 코드에서, lodash/debounce 라이브러리를 가져와서 debounce 함수를 사용한다. debounce 함수는 함수와 시간(ms)을 인수로 받아 지정된 시간 이후에 함수를 실행한다. 이 예제에서는 500ms를 기다린 후에 handleSearch 함수를 실행한다.

handleSearch 함수는 API를 호출하거나 검색 결과를 업데이트하는 등의 작업을 수행한다. setSearchTerm 함수를 사용하여 input 요소의 값을 변경하고, handleSearch 함수를 실행한다. 이것은 입력하는 동안에도 실시간 검색 결과를 제공하는 것이 가능하다.

데바운스를 사용하면 사용자가 입력하는 동안 과도한 API 호출이 발생하지 않고, 불필요한 연산을 줄일 수 있다다. 이를 통해 앱의 성능과 사용자 경험을 향상시킬 수 있다.

 

---

데바운스 적용 후의 검색 모습.(알아보기 힘들 정도의 저화질, 아직 개발중이니 그러려니..)