[TIL]14. 디바운싱? 쓰로틀링?

강지수·2025년 1월 17일

TIL

내일배움캠프 React9기 TIL

목록 보기

14/20

디바운싱(Debouncing)과 쓰로틀링(Throttling), 왜 써야 할까?

이벤트 핸들러가 너주 자주 실행되는 것을 방지하는 기술.
이들은 성능 최적화와 리소스 관리에 많이 사용됩니다.

디바운싱(debouncing)

디바운싱은 이벤트가 연속적으로 발생할 때, 마지막 이벤트만 실행되도록 하는 기법입니다.

예를 들어, 검색창에서 사용자가 타이핑할 때마다 API 요청을 보낸다면 서버에 너무 많은 요청이 전송됩니다. 이를 방지하기 위해 디바운싱을 사용하면, 사용자가 입력을 멈춘 후 일정 시간이 지나야 요청을 보내도록 할 수 있습니다.

디바운싱 적용 전 코드

// search 기능
input.addEventListener("input", async (e) => {
  section.innerHTML = "";
  const filteredMovie = await getSearch(e.target.value);
  const value = filteredMovie.results;
  template(value);
  if (e.target.value.length === 0) {
    postMovie();
  }
});

위 코드에서는 사용자가 입력할 때마다 API 요청이 발생합니다. 즉, "영화"라는 단어를 입력하면 3번의 API 요청이 전송됩니다(ㅇ → 영 → 영화). 이는 불필요한 요청을 증가시키고 성능을 저하시킵니다.

디바운싱 적용 코드

// search 기능
let debounceTimer;
input.addEventListener("input", (e) => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(async () => {
    console.log("디바운싱")
    section.innerHTML = "";
    const filteredMovie = await getSearch(e.target.value);
    const value = filteredMovie.results;
    template(value);
    if (e.target.value.length === 0) {
      postMovie();
    }
  }, 3000); // 3초인 이유 :  너무 짧게 하면 적용됬는지 모르겠어서 넉넉히 3초로 확인 후 수정
});

왜 3초로 설정했을까?

너무 짧으면 디바운싱이 적용됐는지 확인하기 어려워서, 넉넉하게 3초로 설정하고 테스트해 본 후 조정하는 것이 좋습니다.

쓰로틀링(Throttling)

마찬가지로 이벤트가 자주 호출되는 것을 방지하고자 하는 기술이다. 일정 시간 동안 이벤트 핸들러를 한번만 실행하도록 한다.

예를 들어, 스크롤 이벤트는 매우 자주 발생합니다. 만약 이를 매번 실행하면 브라우저 성능이 저하될 수 있습니다. 이때 쓰로틀링을 적용하면, 일정 주기마다 한 번씩만 실행되도록 제한할 수 있습니다.

쓰로틀링 적용 코드

// search 기능
let throttleTimer;
input.addEventListener("input", (e) => {
  if (!throttleTimer) {
    throttleTimer = setTimeout(async () => {
      console.log("쓰로틀링 적용");
      section.innerHTML = "";
      const filteredMovie = await getSearch(e.target.value);
      const value = filteredMovie.results;
      template(value);
      if (e.target.value.length === 0) {
        postMovie();
      }
      throttleTimer = null;
    }, 3000); // 3초마다 한 번만 실행
  }
});