Debounce와 Throttle – 이벤트 최적화 핵심 개념 정리

 

 

안녕하세요 😊
웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.
예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠?

 

이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.

---

📍 1. Debounce – 마지막 동작만 실행

Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다.

 

예시: 검색창 자동완성

 

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

const searchInput = document.querySelector("#search");
searchInput.addEventListener("input", debounce((e) => {
  console.log("검색 API 호출:", e.target.value);
}, 500));

 

👉 사용자가 계속 입력하면 타이머가 리셋되고, 마지막 입력 후 0.5초 뒤에만 실행됩니다.
즉, 불필요한 API 호출을 막고 최종 입력값만 처리할 수 있습니다.

---

📍 2. Throttle – 일정 주기마다 실행

Throttle은 이벤트가 아무리 많이 발생해도, 일정 주기마다 한 번씩만 실행되도록 제한하는 방법입니다.

 

예시: 스크롤 이벤트 최적화

 

function throttle(fn, limit) {
  let waiting = false;
  return function (...args) {
    if (!waiting) {
      fn.apply(this, args);
      waiting = true;
      setTimeout(() => waiting = false, limit);
    }
  };
}

window.addEventListener("scroll", throttle(() => {
  console.log("스크롤 위치:", window.scrollY);
}, 200));

 

👉 스크롤 이벤트가 수백 번 발생해도 0.2초에 한 번만 실행됩니다.
이 덕분에 무거운 연산(예: 이미지 로딩, DOM 계산)을 효율적으로 처리할 수 있습니다.

---

📍 3. Debounce vs Throttle 비교

구분	Debounce	Throttle
실행 시점	마지막 동작 이후 일정 시간 뒤	일정 주기마다
사용 예시	검색창 입력, 창 크기 조절	스크롤 이벤트, 마우스 이동
특징	불필요한 반복 실행 제거	실행 빈도를 제한

👉 간단히 말하면,

• Debounce = 마지막 입력만 처리
• Throttle = 일정 간격으로 처리

---

📍 4. 실무 활용 팁

• 검색창, 자동저장 → Debounce
• 무한 스크롤, 차트 렌더링, 윈도우 스크롤 추적 → Throttle
• React, Vue 같은 프레임워크에서도 동일한 로직 적용 가능

---

✅ 마무리

웹 성능 최적화를 위해서는 이벤트를 그대로 실행하지 않고 Debounce나 Throttle을 꼭 적용해야 합니다.
이 두 개념을 잘 이해하면 사용자 경험(UX)을 높이고 서버 부담도 줄일 수 있습니다.