[KTB 파이널 프로젝트 트러블 슈팅] form 내 버튼 클릭 시 submit 이벤트 발생 문제

트러블슈팅 ☄️

[KTB 파이널 프로젝트 트러블 슈팅] form 내 버튼 클릭 시 submit 이벤트 발생 문제 - HTML

yeeejji 2024. 10. 2. 16:36

728x90

☄️ 문제 상황

폼 내에 카테고리를 선택할 수 있는 버튼이 존재했다.

제출 버튼을 클릭할 때뿐만 아니라 카테고리 선택과 같은 일반 버튼을 클릭했을 때도 폼 제출 이벤트가 발생하는 문제에 마주쳤다.

☄️ 문제 원인

HTML 표준에 따르면, <button> 요소는 기본적으로 type="submit" 속성을 가진다.

따라서, 버튼을 클릭하면 폼이 제출되는 이벤트가 발생하는 것이다.

☄️ 해결 방법

두 가지가 있다.

☝🏻 e.preventDefault()를 사용해 폼 제출 방지

e.preventDefault()란?
이벤트가 발생했을 때, 브라우저의 기본 동작을 막는 메서드

주로 브라우저의 기본 동작 대신, 사용자가 정의한 동작을 수행하고 싶을 때 사용한다.

예시 코드

const handleMaxUsersClick = (e, num) => {
    e.preventDefault(); // 폼 제출 기본 동작을 막음
    setMaxUsers(num);
};

✌🏻 type="button"으로 버튼 타입 명시적 설정

<button> 요소의 type 속성을 button으로 설정하여 폼 제출 이벤트가 발생하지 않도록 한다.

예시 코드

<button type="button" onClick={(e) => handleMaxUsersClick(e, 4)}>
    4명
</button>

☄️ 내 코드

버튼 타입을 명시적으로 지정해주는 2번 방법을 사용했다.

캠켜공 / 캠끄공 카테고리

<div className="flex space-x-3">
  {["캠켜공", "캠끄공"].map((cat) => (
    <button
      key={cat}
      onClick={() => handleCategoryClick(cat)}
      type="button"	// 여기! 🫐
      className={`flex items-center space-x-2 px-8 py-2 rounded-full shadow-md hover:bg-[#6D81D5] hover:text-white transition duration-300 ${
        category === cat
          ? "bg-[#6D81D5] text-white"
          : "bg-[#E0E7FF] text-[#4659AA]"
      }`}
    >
      <img
        src={`${process.env.PUBLIC_URL}/assets/images/${
          cat === "캠켜공" ? "cam-on-icon.png" : "cam-off-icon.png"
        }`}
        alt={cat}
        className="w-5 h-5"
      />
      <span>{cat}</span>
    </button>
  ))}
</div>Ï

인원수 선택 카테고리

<div className="mt-5 mb-5 relative px-5">
    <div className="flex items-center space-x-2 mb-2">
      <label className="block text-gray-700 text-sm sm:text-base md:text-lg font-bold">
        최대 인원 설정
      </label>
      <img
        src={`${process.env.PUBLIC_URL}/assets/images/blueberry-icon.png`}
        className="w-[25px] h-[25px] mt-[-7px]"
        alt="Icon"
      />
    </div>
    <div className="flex space-x-3">
      {[2, 3, 4, 5].map((num) => (
        <button
          key={num}
          type="button" // 여기 ! 🫐
          onClick={() => handleMaxUsersClick(num)}
          className={`flex items-center space-x-2 px-7 py-2 rounded-full shadow-md hover:bg-[#6D81D5] hover:text-white transition duration-300 ${
            maxUsers === num
              ? "bg-[#6D81D5] text-white"
              : "bg-[#E0E7FF] text-[#4659AA]"
          }`}
        >
          {num}명
        </button>
      ))}
    </div>
    {maxUsersError && (
      <p
        className={`text-xs italic mt-1 ${
          maxUsersError === "통과" ? "text-blue-500" : "text-red-500"
        }`}
      >
        {maxUsersError}
      </p>
    )}
  </div>

🪐 실행 화면

수정 전

수정 후