[react] throttle 함수 만들기

throttle 은 이벤트 핸들링에 관련된 개념으로,
처음 클릭할때 함수를 호출하고,
일정시간동안 호출을 막는 기능을 한다
스크롤 이벤트를 처리 할 때 주로 사용,

비슷한 개념으로 debounce도 있는데,
이건 이벤트가 트리거 되고 일정 시간 이후에 호출이 되는것으로,

둘다 부하를 줄이거나 불필요한 서버 요청을 줄이는데 사용

제가 사용하는 이벤트는 처음 누른 시점이 중요하기 때문에 Throttle 함수를 구현해서 사용 했습니다.

구현내용

export const throttling = (throttleTimePerMs = 500) => {
  let timer: NodeJS.Timer | null = null;

  const throttleFunc = (callbackFunc: () => void) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
      }, throttleTimePerMs);
      callbackFunc();
    }
  };

  return throttleFunc;
};

• 여러곳에서 사용하기 위해 공통 함수로 정의
• throttleTimePerMs 인자를 이용해서 시간을 지정하지 않으면 0.5초를 default로 설정
• timer는 throttleFunc가 하나의 timer 변수를 바라봐야 되기 때문에 클로저 개념으로 외부함수에 선언
• callbackFunc는 반환할 함수의 인자로 만들어서 한 파일에서 실행 하고 싶은 함수를 마음대로 지정할 수 있도록 한다
• timer 값이 없다면 셋타임아웃이 timer에 담기고 callbackFunc 함수를 실행, 그 이후에는 timer 시간이 다 되어 실행되면서 null로 바꿀때까지 실행 안되도록 함

사용방법

const throttleFunc = useMemo(() => throttling(2000), []);

<Btn onPress={() => throttleFunc(() => request1())} />
<Btn onPress={() => throttleFunc(() => request2(data))} />

• useMemo를 사용한 이유는, state 값이 바뀔때 마다 함수가 다시 할당 되면서 timer 값이 매번 null이 됨...
• throttleFunc에 callback 함수를 전달

실행하고 싶은 함수를 또 함수에 담은 이유

• 어떤 타입의 함수가 들어올지 몰라서 throttleFunc에서 받은 callbackFunc 함수는 () => void 타입으로 지정
• 콜백 함수로 한번 더 담아주면, 안에 실행할 함수는 인자가 있든 없든 그 파일에서 지정한 함수로 사용 가능