디바운스 - Debounce

Debounce

• 연속된 함수 호출을 지연시켜서 최종호출만 실행되도록 하는 기법이다.

• 리액트에서 debounce를 사용하는 주된 지유는 사용자의 입력 이벤트, 예를 들어서 사용자의 검색창 입력, 이나 윈도우 리사이즈 이벤트 등에서 발생하는 불필요한 연속 호출을 방지하여 성능을 최적화하기 위해서이다.

1. Lodash 사용하기

lodash는 자바스크립트 유틸리티 라이브러리로, 디바운스 함수가 내장되어있다.

npm install lodash

2. debounce를 사용하여 입력이벤트를 처리한다.

import React, {useState, useCallback} from 'react';
import _ from 'lodash';

function SearchComponent(){
	const [query, setQuery] = useState('');
  
  // debounce된 함수를 생성
const debounceSearch = useCallback(
  _.debounce((searchTerm) => {
  	console.log(`검색 api호출 : ${searchTerm}`);
    // 검색api 로직
  }, 300); // 300ms 지연
  ,[]);
  
const handleChange = (e) => {
	const searchTerm = e.target.value;
  	setQuery(searchTerm);
  	debounceSearch(searchTerm);
};
  
return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="검색어를 입력하세요..."
      />
    </div>
  );
}

이외

lodash를 쓰지 않고 자체적으로 debounce 함수를 만들어서 쓸 수 있다