[React] 리엑트 debounce & Throttle(feat. 검색 기능 구현)

최근 검색기능을 구현하다가 알게된 개념인 Debounce 와 Throttle에 대해서 정리해보려고 한다.
검색 기능을 구현하다보면 한글자 한글자 입력할 때 마다 매번 콘솔에 찍히고 api를 그때마다 요청하니 성능적인 부담이 될 것이라는 생각을 한번쯤은 해봤던 경험이 있을 것이라고 생각한다.
이럴 때 유용하게 쓰이는 것이 저 두가지 개념 Debounce 와 Throttle이다.
물론 같은 기능을 하는 라이브러리도 존재하지만 , 이번에는 라이브러리 없이 구현하는 것이 더 나을 것이라고 생각해서 라이브러리는 사용하지 않았다.

Debounce

먼저 Debounce는 연속되는 함수 호출이 있을 경우 가장 마지막 함수만 호출하는 방식이다.
예를들어 검색창에 tstory를 검색하면 debounce를 적용하기 전에는 

이렇게 onchange가 일어날 때마다 함수를 호출한다. 

  ...
  
  const [tmpQuery, setTmpQuery] = useState(name);
  const handleChange = (e) => {
    setTmpQuery(e);
  };

  const [url, setUrl] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState(tmpQuery);
  
  
  useEffect(() => {
    const debounce = setTimeout(() => {
      return setDebouncedQuery(tmpQuery);
    }, 5000); //->setTimeout을 5000로 설정함으로써 연속된 함수가 종료된 후 5초 뒤에 요청을 보냄
    return () => clearTimeout(debounce); // 타이머 제거
  }, [tmpQuery]); // 마지막 이벤트에만 setTimeout이 실행
  
  
  return ( 
  	<input className="flex flex-col mb-4" onChange={(e) => handleChange(e.target.value)}/>
    )

위와 같이 적용하면, 연속되는 변화가 멈춘 후 5초가 지난 뒤에야 함수를 호출한다
결론적으로는 이전에 6번이 일어나던 요청이 debounce를 적용 후에는 요청이 한 번만 간

Throttle

throttle는 프로젝트에 직접 적용해보지는 않아서 개념만 정리해보려고 한다.
이 개념은 debounce와 달리 이벤트 발생시 함수를 즉시 실행시키고, 지정한 시간동안 이벤트를 발생하지 못하도록 막는 방식이다.
즉, 정해진 시간에 한번씩 요청되는 것이다.
만약에 2초에 한번씩 실행을 원하면 계속된 함수 이벤트가 있더라도 2초의 한번씩 요청을 한다는 것이다.
Throttle는 무한스크롤을 구현할 때 많이 이용되는 개념이라고 한다.