2026-02-28

디바운스(Debounce) & 쓰로틀링(Throttle)

왜 필요한가?

사용자 이벤트는 생각보다 많이 발생한다.

• 스크롤 → 초당 수십 번
• input 입력 → 타이핑마다 발생
• resize → 계속 발생

그대로 처리하면:

• API 과호출
• 불필요한 렌더링
• 성능 저하

⇒ 호출 빈도를 제어하는 기법 필요

디바운스 (Debounce)

마지막 이벤트 발생 후 일정 시간이 지나야 실행

⇒ 계속 이벤트가 발생하면 실행을 미룬다.

• ex. 검색창 자동완성 (검색 결과 목록 표시)
  • 블로그 에디터 자동저장
  • 사용자가 타이핑
  • 멈춘 뒤 300ms 후 API 요청
• 그림으로 이해

  입력:  A  B  C  D
  실행:          실행
  

• 코드 예시

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

쓰로틀링 (Throttle)

일정 시간마다 한 번만 실행

⇒ 이벤트가 계속 발생해도 정해진 주기마다 실행

• 예시: 스크롤 위치 추적
  • 1초에 한 번씩만 실행
• 그림

  스크롤: ||||||||||||
  실행:   |    |    |
  

• 코드 예시

  function throttle(fn, delay) {
    let lastCall = 0;
    return function (...args) {
      const now = Date.now();
      if (now - lastCall >= delay) {
        lastCall = now;
        fn.apply(this, args);
      }
    };
  }
  

비교

React에서의 활용

• 검색 자동완성
• 무한 스크롤
• 윈도우 resize 처리
• 마우스 이동 이벤트

⇒ useCallback + debounce 조합 자주 사용

요약

• 디바운싱 - 빈번하게 발생하는 이벤트를 ‘특정 시간 이후에 한번만’ 실행 시키는 최적화 기법
• 쓰로틀링 - 빈번하게 발생하는 이벤트를 ‘일정한 간격으로 한번만’ 실행 시키는 최적화 기법

참고자료

• https://webclub.tistory.com/607
• https://haesoo9410.tistory.com/318
• https://velog.io/@seoyaon/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing%EA%B3%BC-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling
• https://onlydev.tistory.com/151