📌 [React] 버튼 여러 번 눌림 방지하는 실무 패턴 정리 🚫🔄

---

📌 [React] 버튼 여러 번 눌림 방지하는 실무 패턴 정리 🚫🔄

💡 왜 "중복 클릭 방지"가 필요할까?

웹 서비스를 개발하다 보면, 사용자가 같은 버튼을 여러 번 빠르게 클릭하는 경우가 자주 발생합니다.
특히 다음과 같은 상황에서는 꼭 방지가 필요합니다.

• 회원가입, 로그인, 결제 등 중요한 요청
• 서버에 요청을 보내는 동안 클릭 여러 번 발생 가능
• 서버에서 중복 요청 처리가 되지 않으면 데이터 중복 생성, 결제 2번 처리 등의 문제 발생

따라서 프론트엔드에서 선제적으로 제어하는 것이 굉장히 중요합니다.

---

🔑 핵심 아이디어: 상태(state)로 버튼을 제어하자

React에서는 useState로 상태를 추가하고, 버튼을 조건부로 비활성화시키는 것이 핵심입니다.

---

📄 기본 패턴 예시

import React, { useState } from "react";

function SubmitButton() {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (isSubmitting) return; // 이미 진행 중이면 무시

    setIsSubmitting(true); // 버튼 비활성화

    try {
      // 서버 요청
      await fakeApiCall();

      alert("요청 성공!");
    } catch (error) {
      alert("에러 발생!");
      setIsSubmitting(false); // 실패 시 다시 버튼 활성화
    }
  };

  return (
    <button onClick={handleSubmit} disabled={isSubmitting}>
      {isSubmitting ? "처리 중..." : "제출하기"}
    </button>
  );
}

export default SubmitButton;

---

🔍 핵심 포인트

처리 설명

isSubmitting 상태 추가	요청 진행 여부를 저장
클릭 시 상태 확인	if (isSubmitting) return; 으로 중복 클릭 방지
요청 시작 시 true	setIsSubmitting(true);
요청 실패 시 다시 false	재시도 가능하게 만듦
버튼 disabled 속성	상태에 따라 클릭 여부 제어

 

---

🌟 더 나은 UX를 위한 추가 아이디어

• 버튼에 로딩 스피너 추가

  {isSubmitting ? <Spinner /> : "제출하기"}
  

• 전체 페이지를 dim 처리하여 클릭 막기

  {isSubmitting && <div className="loading-overlay">로딩 중...</div>}
  

---

📝 정리

✔️ React에서는 상태로 버튼을 제어하는 것이 가장 간단하고 강력한 방법
✔️ 중복 클릭은 서버 오류, 데이터 중복 문제로 이어질 수 있으니 반드시 방지
✔️ UX까지 고려해 로딩 상태 표시하면 더욱 깔끔한 결과