[React] Debounce를 활용한 중복 요청 방지

각종 이벤트, 미션을 통해 보상을 받는 경우 유저가 Claim 버튼을 단시간 내에 여러번 클릭하여 서버에 여러번 요청이 들어가고 중복 요청으로 인한 비정상적인 응답 및 에러가 발생하는 이슈가 있었다.

 

위 문제를 해결하기 위해 여러가지 방법을 사용할 수 있었고, 나는 lodash에서 제공하는 debounce 함수를 사용해 문제를 해결했다.

 

View Model에서 mutation을 정의하고

 const { claim, claimAll } = ExViewModel();

위와 같이 mutate 함수를 구독해 사용하는 과정에서 

 

 const debouncedClaimAll = debounce(claimAll, 600);

 

debounce를 걸어주면
지정해놓은 시간이 끝나고 하나의 요청을 보낼 수 있었고, 문제를 해결할 수 있었다.