[React] 디바운스(Debounce), 쓰로틀(Throttle)

 

디바운스(Debounce)와 쓰로틀(Throttle)

 

- 디바운스와 쓰로틀 React상의 onChange 이벤트로 api의 요청을 계속해서 보낼 시, 서버의 과부하를 막기위해 사용한다.

쉽게 말하면 api 요청을 과도하게 할 경우 서버에 부담이 가기때문에, 이를 막기위한 하나의 방식이라고 생각하면 된다.

 

디바운스(Debounce)

 

이벤트가 일어나기 시작할때 여러번 호출이 발생한다면, 제일 마지막이나 제일 처음에 호출된 것만 실행하게 하는 것

 

디바운스 예제

 

function Input() {
  const [text, setText] = useState('');
  const [tmpText, setTmpText] = useState(query);


  useEffect(() => {
    const debounce = setTimeout(() => {
      return setText(text);
    }, 300); 				
    return () => clearTimeout(debounce); // 타이머 제거
  }, [tmpText]);			

  const handleChange = (e) => {
   setTempText(e.target.value);
  }

  return (
    <>
       //...
          <input value={tmpText} onChange={handleChange} /
    </>
  );
}

디바운스는 제일 마지막에오는 이벤트만 호출하게 만드는 기법이다. setTImeout을 사용하여 함수가 호출되기전 다시 호출된다면 이전에 호출된 함수를 실행 취소 시킨다.

 

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

코드 출처 - https://lakelouise.tistory.com/313?category=1023088 

 

쓰로틀(Throttle)

 

쓰로틀은 마지막 함수가 호출되고 난 후 일정 시간동안 호출되지 않게 한다. 

내가 진행중인 프로젝트가 있는데 예약을 할때 버튼을 클릭할 시 여러번 버튼이 눌리게 될경우나, 모바일에서는 버튼을 여러번 누를 경우가 발생하는데 버튼을 누르고 나서 일정 시간동안 호출되지 않게 막는 방식이다.

여러번 눌린다면 예약이 여러번 발생하여 서버에서는 오류를 내보내게 된다.

 

버튼의 클릭이나 보통 스크롤에 많이 사용된다.

 

쓰로틀 예제

 

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

  const handleOnClick = () => {
    if (throttle) return;
    if (!throttle) {
      setThrottle(true);
      setTimeout(async () => {
        //api 호출
        setThrottle(false);
      }, 300);
    }
  };

 

보통은 쓰로틀이나 디바운스는 lodash 라이브러리를 사용하여 많이 사용한다. 

 

정리하자면 디바운스는 여러번 호출될 경우 마지막 호출만을

쓰로틀은 함수 호출후 일정시간을 막는 역할을 한다.

 

 

 

 

참고 자료 

 

- https://lakelouise.tistory.com/313?category=1023088 

- https://velog.io/@skawnkk/debounce-throttle