[React] 쓰로틀/디바운스

쓰로틀/디바운스

쓰로틀(Throttle)과 디바운스(Debounce)는 둘 다 이벤트 핸들링에서 사용되는 기술로, 이벤트의 발생 빈도를 제어하거나 제한하는 목적으로 사용된다. 이 두 기술은 빈번한 이벤트 발생으로 인한 성능 문제나 불필요한 리소스 소모를 방지하기 위해 유용하게 활용된다.

쓰로틀이란?

쓰로틀(Throttle)은 일정한 시간 간격을 두고 이벤트를 발생시키는 방식 예를 들어, 스크롤 이벤트의 경우 사용자가 스크롤을 할 때마다 이벤트가 발생하면 성능 문제가 발생할 수 있다. 이럴 때, 쓰로틀을 적용하면 일정 시간 동안 한 번만 이벤트를 발생시키도록 제한할 수 있다.

디바운스란?

디바운스(Debounce)는 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 경과할 때까지 대기한 후에 이벤트를 처리하는 방식 예를 들어, 검색어 입력 이벤트에서 실시간으로 결과를 보여주는 경우에, 사용자가 타이핑을 하면 타이핑이 완료된 후 일정 시간 동안 기다렸다가 검색을 실행하는 방식이다.

쓰로틀을 사용한 이유

---

내가 구현한 메인페이지에서는 handleWheel 함수가 스크롤 이벤트를 핸들링하며, 사용자가 마우스 휠을 조작할 때 발생하는 이벤트를 처리하고 있다. 스크롤 이벤트는 사용자의 행동에 따라 빈번하게 발생할 수 있으므로 이를 쓰로틀링하여 부하를 줄이고자 사용했다.
–> 스크롤 한번 쭉 했을때 맨 아래 화면으로 가는것이 아닌 한 섹션구분으로 넘어가도록 구현

사용한 방법

---

export const throttle = (func: (...args: any[]) => void, time: number) => {
  let throttle: number | null = null;
  return (...args: any[]) => {
    if (!throttle) {
      throttle = window.setTimeout(() => {
        func(...args);
        throttle = null;
      }, time);
    }
  };
};

• throttle 함수는 두 개의 매개변수 func는 실제 실행될 함수를 의미하며, time은 쓰로틀링할 시간 간격이다.

• throttle 함수는 클로저를 반환한다. 반환된 함수는 실제 이벤트 핸들러로 사용될 함수

• 반환된 함수 내부에서는 throttle 변수를 이용하여 시간 간격 내에 이벤트가 다시 발생하지 않도록 제어한다. throttle이 null일 때만 새로운 이벤트를 실행하고, 해당 시간 간격 내에는 다시 실행하지 않는다.

적용한 코드

---

const handleWheel = throttle((event: WheelEvent) => {
  // ...
  if (event.deltaY < 0 && activeSection > 1) {
    setActiveSection(activeSection - 1);
  } else if (event.deltaY > 0 && activeSection < 5) {
    setActiveSection(activeSection + 1);
  }

  setTimeout(() => {
    window.scrollTo({ top: scrollPosition });
  }, 0);
}, 1000);

window.addEventListener("wheel", handleWheel, { passive: false });

return () => {
  window.removeEventListener("wheel", handleWheel);
};

• handleWheel 함수가 스크롤 이벤트를 핸들링하며, 스크롤 이벤트가 발생할 때마다 해당 함수가 실행된다.

• 하지만 이벤트가 빠르게 연속해서 발생하더라도, throttle 함수에 의해 설정한 시간 간격(1000ms) 내에는 실제 이벤트 핸들러가 한 번만 실행된다.

• 따라서 사용자가 빠르게 마우스 휠을 움직여도, 스크롤 이벤트의 처리가 일정한 간격으로 제어되어 성능을 유지할 수 있다.

결과

(실제 마우스 휠을 아무리 돌려도 섹션 기준으로 화면이 전환된다)