[React] Debounce와 Throttle이란?

🎯 Debounce와 Throttle이란?

• onChange 이벤트로 인해 글자가 작성될 때마다 api를 호출하게 된다면 서버에 과부하를 줄 수 있다. 이는 성능상의 문제가 발생될 수 있으며 유저의 사용성을 해치게 된다. 또한 비용적인 문제도 있다!
• 즉, Debounce와 Throttle는 이벤트 핸들러가 많은 연산을 수행하는 경우 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다.
• 디바운스(debounce)와 스로틀(throttle)은 시간이 지남에 따라 함수를 몇 번이나 실행할지를 제어하는 유사한 기술이지만 서로 다르다.

 

📝 Debounce란?

연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

• 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.
• 즉, 일정 시간 전에 이벤트가 발생하게 되면, 기존의 타이머를 취소하고 시간을 재설정하여 이벤트 호출을 방지하고, 일정 시간이 경과된 후 이벤트 핸들러가 호출되도록 한다.

let timer;
document.querySelector('#input').addEventListener('input', (e) => {
  if (timer) { // 200초 전에 입력이 발생되면 이전 타이머 취소
    clearTimeout(timer);
  }
  timer = setTimeout(() {
    // api 요청
  }, 200);
});

function debounce(func, timeout) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args) // timeout 시간 뒤에 func함수가 실행 되도록, 근데 이 함수가 실행되기 전에 이 함수가 또 한번 호출된다면 clearTimeout(timer);으로 이전에 호출되어 있던 것을 함수 실행 취소하겠다.
    }, timeout)

  }
}

export default function SearchTextField({ value, onChange }) {
  const debouncedOnChange = debounce(onChange, 500)
  return (
    <Container>
      <MagnifyingGlass />
      <Input
        placeholder="배우고 싶은 언어, 기술을 검색해 보세요."
        onChange={(e) => debouncedOnChange(e.target.value)}
      />
    </Container>
  );
}

• 검색창 값이 바뀔 때마다 API 호출을 하면 너무 많은 요청을 보내기 때문에 서버에 과부하가 걸릴 수 있다.
• 웹 클라이언트에서 debounce를 이용하여서 요청 보내는 횟수를 적절히 조절할 수 있다.

 

📕 사용 예시

• 리사이즈 예제(Resize Example)
  • 데스크톱의 브라우저 창 크기를 조정하는 경우에 많은 크기 창 조정 이벤트를 내보낼 수 있다.
• Ajax 요청이 있는 자동 완성 양식의 키 누르기 예제

 

📝 Throttle란?

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

• 이벤트를 일정한 주기마다 발생하도록 하는 기술이다.
• Throttle의 설정시간으로 1ms를 주게 되면 해당 이벤트는 1ms 동안 최대 한 번만 발생하게 된다.
• 특성 자체가 실행 횟수에 제한을 거는 것이기 때문에 일반적으로 성능 문제 때문에 많이 사용한다.

let timer;
document.querySelector('#input').addEventListener('input', (e) => {
  if (!timer) { // 타이머는 일정 시간 후에 스스로를 해제하고 api 요청
    timer = setTimeout(() => {
      timer = null;
      // api 요청
    }, 200);
  }
});

 

📕 사용 예시

• 스크롤을 올리거나 내릴 때 보통 사용

 

🏷 요약

• debounce는 함수 자체를 반환하고 setTimeout은 함수를 종료시킬 수 있는 id를 반환한다.

 

📌 참고

• 디바운스(Debounce)와 스로틀(Throttle ) 그리고 차이점
• (JavaScript) 쓰로틀링과 디바운싱

• React | 컴포넌트 성능 향상 시키기 (feat. Lodash throttle & debounce)
• Underscore debounce vs vanilla Javascript setTimeout