debounce

Debounce는 무엇인가?

여러 번 동일하게 호출되는 함수가 있다면, 마지막 혹은 처음 함수만 호출되게 의도적으로 만들어 주는 것 이다.

어떤 상황에서 필요하길래??

debounce가 개인적으로 필요 했던 상황은 프로젝트를 진행하던 중이었다. react-icon을 사용해봤다면 이해가 쉬울 것이다. 검색을 하는데 따로 검색하는 버튼이 없고 검색란에 검색어만 넣으면 알아서 검색이 된다. 개인적인 경험으로 이러한 형태의 검색 기능이 너무 좋았어서 비슷하게 구현하고 싶었다.

const [search, setSearch] = useState('');

const searchKeyword = (e) => {
	setSearch(e.target.value)
}

useEffect(() => {
    
	검색된데이터호출함수(search)
    
  }, [search]);

1. search라는 상태값에 e.target.value를 담고
2. 검색된데이터호출함수()는 search값이 바뀔 때마다 useEffect에 의해 실행된다.
3. e.target.value는 Input태그에서 onChange 실행된다. 즉 타이핑하거나 지우기만 해도 계속 실행된다는 의미이다.

처음에 위처럼 구현 했을 때, 원하는대로 검색 기능이 구현은 됐지만 network 탭을 살펴보니 정말 많이 데이터를 호출하고 있었다. 그리고 실제로 사이트가 버벅이는 것처럼 보이기도 했다.
이를 해결하기 위해서 원하는 타이밍에 마지막 함수만 호출할 수 있는 debounce가 필요해졌다.

어떻게 쓰면 되나요?

debounce라는 특정한 무언가가 있는 것이 아니라, setTimeout을 이용하면 되는 것이다.

const [search, setSearch] = useState('');

const searchKeyword = (e) => {
	setSearch(e.target.value)
}

useEffect(() => {
   const timer = setTimeout (()=>{
     	검색된데이터호출함수(search)
   }, 600);
  
  return () => clearTimeout(timer);
  
  }, [search]);

setTimeout이 추가가 되어 search가 바뀔 때마다 useEffect에 의해 함수가 실행되지만 0.6초 후에 실행되고 return 문에 의해 바로 종료된다.

즉, 무수히 많은 타이핑을 치거나 지워서 search가 바뀌더라도 함수는 0.6초 후에 딱 한 번 실행 되는 것이다.