문제

"예약하기" 버튼을 빠르게 여러 번 연타하면 동일한 예약 요청이 중복으로 전송되는 문제가 발생했습니다.

→ 중복 요청으로 인해, 서버에는 불필요한 트래픽이 발생하고, 중복 예약 생성 위험이 있었습니다.

해결 방법

방법1. Debounce / Throttle ❌

• 빠른 연타를 그룹화해서 한 번만 처리함.

• 문제점 : 첫 요청 자체가 의도적으로 지연 → 예약 요청 즉시성이 떨어짐 → UX 저하

  → 예약처럼 즉시 반응이 필요한 액션에는 부적절하다고 판단했습니다.

방법2. state 기반 isSubmitting 플래그 ❌

• 문제점 : React의 state 업데이트는 비동기적으로 수행되기 때문에, 빠른 연타 상황에, state가 아직 true로 반영되기 전이라면 여전히 중복 요청 발생 가능합니다.

방법3. useRef로 동기적 플래그 사용 (최종 선택 ⭕️)

• 로직

  • 예약 요청 시작 시 ref.current = true로 설정 → 추가 클릭 무시.
  • 요청이 성공/실패 시점에 false로 초기화.

  const onSubmit = (data: ReservationRequestBody) => {
      // 아직 앞 예약 요청이 완료되지 않은 경우
      if (submittingRef.current) {
        alert('아직 예약이 완료되지 않았습니다.');
        return;
      } else {
        submittingRef.current = true;
      }
      // 예약 요청
      mutate(
        { activityId, body: data }, 
        {
          onSuccess: () => {
            reset(); // 제출 후 폼 초기화
            submittingRef.current = false;
          },
          onError: () => {
            submittingRef.current = false;
          },
        },
      );
    };
  

• 장점(효과)

  1. 즉시성

     지연 없이, 동기적으로 즉시 체크/설정 가능 → 첫 클릭 직후부터 중복 요청 차단 가능합니다.

  2. 성능 최적화

     State 기반 방식과 달리 불필요한 리렌더링을 발생시키지 않아, 성능상 부담이 없습니다.

  3. 구현 간결성

     기존 코드 흐름을 크게 건드리지 않고도 도입할 수 있었고, 이미 사용 중인 react-query의 mutate 라이프사이클과 자연스럽게 연동되었습니다.(onSuccess, onError)

적용 결과

이번 트러블슈팅에서 제가 중요하게 생각했던 조건은,

“지연 없이, 첫 클릭 직후부터 중복 요청 차단 가능할 것” 이었습니다.

Before (문제 상황)

• 연타 시 여러 개의 예약 요청 전송
• 서버 부하 증가

After (useRef 적용)

• 첫 클릭 이후 추가 제출 차단
• 요청 1회 발생