[React] 윈도우 리사이징 예제로 알아보는 throttle

throttle (쓰로틀링)이란?

연속된 이벤트가 들어오게 되면 과부하가 걸리거나 쓸데없는 API 호출을 하는 등의 일이 생긴다.

그걸 방지하고자 적용하는게 일정한 시간간격에만 이벤트를 감지하고 그 외의 시간에는 무시하는 게 쓰로틀링 기법이다.

 

(인식) -----3초간 무시----- (인식) -----3초간 무시------ (인식) 

 

대표적으로 윈도우 리사이징, 스크롤 이벤트에 쓰로틀링이 많이 사용된다.

예를 들어 Intersection Observer로 구현되기도 하지만 throttle로 구현할 수도 있는 무한 스크롤이 있다.

 

'연속된 이벤트가 들어오는데 특정 함수를 3초 간격으로만 호출하기' 이런 상황에 쓰로틀링을 적용할 수 있다.

 

throttle 구현하기

• 이미 콜백함수가 실행된지 delay초가 지나지 않았다는 것을 알기 위한 flag가 필요하다. throttle 상태값을 선언하고 기본값을 false로 둔다.
• useEffect()로 throttle을 감시하면서 throttle이 특정 시간 내에 실행된 적이 있다면 return으로 돌려보내고,
  아니라면 true로 바꾼 다음 타이머에 callback 함수를 설정한다.
• 그러면 0.5초동안은 새로 이벤트가 들어와도 무시하고 0.5초가 지난 다음에 callback을 실행한다.
• 일정한 간격동안 이벤트 무시하고 타이머에 설정된 행동을 수행하기 -> 가 바로 쓰로틀링 구현의 핵심이다.

import React, { useState, useEffect } from 'react';

function Resizing() {
  const [throttle, setThrottle] = useState(false);

  useEffect(() => {
    if (throttle) return;
    if (!throttle) {
      setThrottle(true);
      let callback = () => {
        console.log(
          `윈도우 높이: ${window.outerHeight} 윈도우 너비: ${window.outerWidth}`
        );
        setThrottle(false);
      };

      setTimeout(callback, 500);
    }
  }, [throttle]);

  return <div>Resizing</div>;
}

export default Resizing;

 

 

+) throttle은 debounce에 비해 추상화가 조금 어려워서 hook으로 만들기는 아래 글을 보고 공부해야겠다.

TypeScript에서 useDebounce, useThrottle 만들기