디바운싱

최근 프로젝트를 하며 디바운싱에 대해 다시 공부해보게 되는 일이 있었다.

디바운싱은 연속된 입력이 들어올 때, 일정 시간이 지나고 나서야 마지막 입력에 대해 실행되는 패턴이다.

평소에 리액트로 개발을 하면서 리액트 디바운싱 방법은 대충 알고 있었지만 js디바운싱도 생각해보게 되었다.

 

 

간단하게 디바운싱에 대해 알아보고 가기로 했다.

리액트 디바운싱

리액트 디바운싱은 useEffect를 활용해 사용하게 된다.

  useEffect(() => {
    const handler = setTimeout(() => {
      일정 시간 뒤 실행할 코드~~
    }, 300);

    return () => {
      clearTimeout(handler);
    };
  }, [searchInput]);

완성한 코드는 이런식이다.

searchInput은 onChange로 사용자가 입력하는 값이다.

 

js 디바운싱

리액트가 아닌 경우 디바운싱을 보면

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

function myFunction(a, b) {
  console.log(a, b);
}

const debouncedFunc = debounce(myFunction, 300);

debouncedFunc(1, 2); // 300ms 후에 myFunction(1, 2)가 호출

 

리액트보다 복잡해 보일 수 있지만 꼭 그렇지는 않다.

 

비슷한 개념으로는 쓰로틀도 있다.