더블 클릭 방지

문제 상황 ❗️

더블 클릭 방지 = 이미 요청된 상황에서 재요청을 방지하겠다는 것

만약 debounce로 구현하면, 인터넷 속도가 느린 환경에서는 특정 시간이 넘으면 사용자가 몇 번이고 더 호출할 수 있는 이슈가 생김

​

Debouce( ) 는? 🤔
​

  • 처음 요청과 마지막 요청 중 한 번만 호출
  • 이벤트가 끝난 후 호출
  • ex ) input 입력, 브라우저 리사이즈 등에 적합

cf) throttle( ) 은? 🤔
​

  • 이벤트가 발생하면 일정 주기로 계속 호출
  • 이벤트 중간 중간 호출
  • ex ) 무한 스크롤 등에 적합
    ​

​

그렇다면 재요청 방지(or 더블 클릭) 에 적합한 방법은? 🤔

  • 일반적인 방법 : loading 상태를 사용

    • apollo Hooks의 useMutation()는 배열을 리턴하는데, 첫 번째 원소는 mutation을 호출해야하는 순간에 호출해야하는 함수, 두 번째 원소는 error, loading(로딩 여부)이 들어있는 객체이다.

      1
      2
      3
      const [verifyCertNum, {loading, error}] = useVerifyCertNumMutation({
          client: ApolloUser,
        });

    • 쿼리가 실행 중이라 보여줄 데이터가 아직 없을 때 loading 값이 true

    • loading은 유저가 mutation 실행 중에 입력 필드나 버튼을 사용할 수 없도록 disabled 할 때 사용할 수 있음

      1
      <input disabled={loading} />

    • error는 mutation 실행이 실패했을 때 입력 필드 주변에 오류 정보를 보여주기 위해 사용

    • 버튼을 눌렀을 때 data를 받아오기 전 loading 상태가 true일 경우에는 return 시켜서 여러번 서버를 호출하는 것을 막는다