<JavaScript> 디바운싱(Debouncing)과 스로틀링(Throttling)

디바운싱(Debouncing)이란?

 

디바운싱은 프로그래밍에서 많이 사용되는 개념으로, 주로 이벤트가 너무 빈번하게 발생하는 것을 최소화하기 위해 사용합니다.

자주 일어나는 이벤트를 감당하지 않고 일정 시간동안 이벤트가 일어나지 않으면 마지막 이벤트만 처리하는 방식입니다.

 

예를 들어, 사용자가 입력창에 글자를 입력할 때마다 발생하는 이벤트를 그대로 처리하면 시스템에 부담이 갑니다.

디바운싱을 통해 일정 시간 이벤트가 발생하지 않으면 마지막으로 발생한 이벤트만 처리하게 됩니다.

 

JavaScript에서는 setTimeout과 clearTimeout 함수를 사용하여 디바운싱을 구현할 수 있어요. 예를 들어 이렇게 사용할 수 있습니다.

 

let timeoutId;
function debounce(func, delay) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    func();
  }, delay);
}

 

스로틀링(Throttling) 기법은 어떻게 사용되나요?

 

스로틀링은 디바운싱과 비슷하지만 약간 다른 개념입니다.

스로틀링은 이벤트 발생률을 특정 시간 간격으로 제한합니다. 즉, 일정 시간 간격 내에 여러 이벤트가 발생하더라도 한 번만 처리되도록 하는 것이죠. 스크롤 이벤트나 리사이징 이벤트 등 자주 발생하는 이벤트의 경우, 스로틀링을 통해 성능을 개선할 수 있어요.

 

JavaScript에서 스로틀링은 이렇게 구현할 수 있습니다.

let isThrottling = false;
function throttle(func, delay) {
  if (!isThrottling) {
    func();
    isThrottling = true;
    setTimeout(() => {
      isThrottling = false;
    }, delay);
  }
}

 

디바운싱과 스로틀링의 차이점

디바운싱과 스로틀링은 모두 이벤트 처리 방식을 제한하여 성능을 개선하려는 목표를 갖고 있지만, 주요 차이점이 있습니다.

디바운싱은 일정 시간 내에 여러 이벤트가 발생하면 마지막 이벤트만 처리하는 반면, 스로틀링은 일정 시간 간격으로 이벤트를 처리하게 됩니다.

 

예를 들어 입력창에 글자를 입력하는 상황에서 디바운싱을 사용하면 사용자가 입력을 완료하는 즉시 이벤트를 처리할 수 있어요.

하지만 스로틀링을 사용하면 사용자가 입력을 완료하기도 전에 이벤트가 일정 시간 간격으로 처리되기 때문에 사용자 경험에 불편함을 줄 수도 있죠.

 

결론적으로, 디바운싱은 이벤트 발생 빈도를 최소화할 목적으로 사용하며, 스로틀링은 수시로 발생하는 이벤트를 일정한 간격으로 처리하려는 목적으로 사용합니다.

 

실제 프로젝트에서 사용하기

실제 프로젝트에서 디바운싱과 스로틀링을 사용하려면 어떻게 해야 할까요? 처음부터 직접 구현하지 않아도 되요.

이미 개발자들이 만들어놓은 유용한 라이브러리들이 있으니 그걸 활용하는 게 좋습니다.

 

예를 들어, Lodash 라이브러리를 사용하면 간편하게 디바운싱과 스로틀링을 적용할 수 있어요.

Lodash를 설치하려면 다음 명령어를 사용하세요.

npm install lodash

 

이렇게 간단한 코드로 디바운싱과 스로틀링을 적용할 수 있어요.

import { debounce, throttle } from 'lodash';

// debounce 예제
const debouncedFunction = debounce(myFunction, 300);
debouncedFunction();

// throttle 예제
const throttledFunction = throttle(myFunction, 300);
throttledFunction();

 

감사합니다.