버튼에 type을 명시하지 않으면?

테니스 레슨 회원 정보를 입력한 후,
제출 버튼을 눌러 해당 정보로 수강생을 생성하는 기능을 작업하고 있었다.

그런데 수강생이 납부한 수업 횟수를 조작하는 버튼을 누르니
의도와는 다르게 자꾸 그 상태에서 수강생 정보가 생성되는 문제가 발생했다.

위의 정보 입력란을 Form 태그로 감싸 구현했는데,
알고보니 type이 지정되지 않은 Form 태그 내부의 버튼은 type이 submit으로 지정된 것처럼 동작한다고 한다.

그래서, 등록 횟수를 조작하는 +/- 버튼을 눌렀을 때에도
의도하지 않게 회원 정보가 제출되어 버린 것이다!

+/- 버튼에 type="button" 을 추가해 문제를 해결했다.

const NumberInput = ({ content, inputValue, setInputValue }) => {
  
  // 중간 생략

  return (
    <InputContainer>
      <PlusMinus type="button" onClick={handleInputMinus} disabled={inputValue <= 0} ref={minus}>
        <HiOutlineMinusSm />
      </PlusMinus>
      <input
        ref={input}
        className="input"
        onFocus={() => {
          minus.current.disabled = true;
          plus.current.disabled = true;
        }}
        onBlur={() => {
          setInputValue((prevState) => ({
            ...prevState,
            [content]: displayed ? Number(displayed) : 0,
          }));
          minus.current.disabled = false;
          plus.current.disabled = false;
        }}
        type="text"
        value={displayed}
        onChange={(event) => {
          setDisplayed(event.target.value.replace(/[^0-9]/g, ""));
        }}
      />
      <PlusMinus type="button" onClick={handleInputPlus} ref={plus}>
        <HiOutlinePlusSm />
      </PlusMinus>
    </InputContainer>
  );
};

참고한 글
버튼에 타입을 쓰는 이유 (button type="button")