[리액트] throttle, debounce

안녕하세요. 이번시간에는 change 이벤트나 scroll 이벤트처럼 짧은 시간동안 한번에 많은 이벤트가 발생할때 최대한 최적화 시킬 수 있게 도와주는 lodash라이브러리의 throttle과 debounce을 알아보겠습니다.

debounce와 throttle

• 짧은 시간에 이벤트가 반복적으로 발생할때, 불필요한 실행을 최소화 시켜줌
• 비동기 통신을 하게 될때 과도한 서버 요청을 막을 수 있음

사용하기 위해선 lodash 패키지를 install 하고 import를 해야합니다.

debounce란?

• 이벤트가 끝난 뒤 설정한 시간이 지나면 콜백함수가 실행됨

사용 예시

const debounceScroll = () => {
  debounce(() => {
    count = { ...count, debounce: count.debounce + 1 };
  }, 500);
};

throttle란?

• 콜백 함수를 지정한 시간내 한번만 호출됨 (scroll과 같이 굉장히 짧은 시간에 많은 이벤트가 발생할 경우 사용)

사용 예시

const throttleScroll = () => {
  throttle(() => {
    count = { ...count, throttle: count.throttle + 1 };
  }, 500);
};