[React.js] Form onSubmit vs Button type="submit"

웹 개발을 진행하면 데이터를 서버로 보내야 할 때가 있고 그때 자주 사용되는 형식이 <form> 요소를 사용하는 것입니다.

 

$form.addEventListener('submit',(event) => {});

<form> 요소 내부에 <input>, <button> 등 다양한 요소를 활용해 데이터를 담고 서버로 요청할 때 submit 합니다.

 

export default function Test() {
  const handleSubmit = (event) => {};
  
  return (
    <form onSubmit={handleSubmit}>
      <button>click</button>
    </div>
  );
}

이때 React에서는 onSubmit을 통해서 submit 이벤트를 발생시키고 해당 이벤트는 <form> 요소에서 사용할 수 있는 속성입니다.

 

그렇다면 button의 type 속성의 값으로 있는 submit은 무슨 값인가? 단순하게 해당 버튼이 submit 요청을 하는 버튼임을 알려주는 버튼입니다. 기본적으로 form 요소 내부에 있는 버튼은 default type으로 submit을 가지고 있습니다.

 

예를 들어, form 내부에 초기화 버튼과 확인 버튼 두 가지 버튼이 있습니다.

 

그렇다면 초기화 버튼을 눌렀을 때 submit이 동작할 필요가 있을까요? 아닙니다. 단순하게 모든 데이터만 초기화되면 됩니다. 이때 button의 type을 submit이 아닌 button으로 바꾸어 활용할 수 있습니다.

export default function Test() {
  const handleSubmit = (event) => {};
  const handleInit = () => {};
  
  return (
    <form onSubmit={handleSubmit}>
      <button type="button" onClick={handleInit}>init</button>
      <button type="submit">check</button>
    </div>
  );
}

 

정리를 해보면 form 요소의 onSubmit이 실질적으로 동작하는 submit 동작을 담당하는 것이고, button의 type 중 submit은 해당 버튼의 역할을 알려주는 용도입니다.

 

또한 추가적으로 form 내부의 input을 다 입력하고 enter 키를 누르는 경우에도 submit이 동작하는데 이때에도 onSubmit의 함수가 동작하기 때문에 button의 onClick보다 onSubmit을 활용하는 것이 좋습니다.

 

참고

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event