[Next.js_React] 쓰로틀링(throttling)과 디바운싱(debouncing)

리뉴얼 후, 설정 페이지에서 토글 버튼을 통해, 서비스알림과 마케팅 알림을 post 요청을 보내야 하는 작업이 있었다.

 

처음에는 아무 생각 없이 버튼을 눌릴 때, 단순히 요청을 보내도록 코드를 만들었는데..

사용자가 버튼을 연속으로 계속 누르면, 누른만큼 요청이 갈 것을 예상하지 못해서 수정에서는 디바운싱을 적용했다.

 

 

우선 간단히 디바운싱과 쓰로틀링에 대해 설명하자면!

❓ 쓰로틀링:
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
지정한 ms에 한 번씩만 실행되게 제한을 두는 것

❓ 디바운싱: 연이어 호출되는 함수들 중 마지막 함수를 호출하도록 하는 것

 

디바운싱_쓰로틀링_그림

 

 

---

 

 

지금 작업에 필요한 것은 디바운싱이다!

사용자가 막 눌려도 마지막 함수 하나만 호출 하면 되기에!

 

 

 

코드를 살펴보자

>>

const [timer, setTimer] = useState<NodeJS.Timeout>(); // 디바운싱 타이머

  const pushClick = async () => {
    ...
    
    if (timer) clearTimeout(timer); // 이전 요청 clear
    
    // 마지막 호출 적용
    const newTimer = setTimeout(async () => { 
      await postFetch(url,{loading : false}) // api 호출 및 함수 적용
      ...
    }, 300);
    
    setTimer(newTimer); // timer state 업데이트
  };

 

setTimer(newTimer) 하는 이유는?

다음에 pushClick()
함수가 호출될 때 이전에 설정된 타이머를
clearTimeout으로 취소하며,
다음번의 클릭 동작을 위해서

 

좀 자세히 설명하자면??

첫 번째 클릭:
timer state는 초기에 undefined
if (timer) clearTimeout(timer);는 아무런 동작을 하지 않고,
setTimeout을 호출하고 타이머 ID를 newTimer에 저장!
setTimer(newTimer)를 호출하여 timer state를 업데이트

두 번째 클릭:
이번에는 timer state에 이전 setTimeout의 ID가 저장되어 있다
if (timer) clearTimeout(timer)를 통해 이전 타이머를 취소
다시 새로운 setTimeout을 설정하고 그 ID를 newTimer에 저장하여
setTimer(newTimer)를 호출하여 timer state를 새로운 타이머 ID로 업데이트!

 

디바운싱이 적용된 걸 볼 수있다!!
마지막 요청만 가는걸~

 

 

 

 

 

 

 

 

 

 

 

 

 

출처 :

리액트 디바운싱 간단 구현 - react debounce

 

(JavaScript) 쓰로틀링과 디바운싱