[Rect Hook Form] 기본적으로 버튼이 submit 버튼으로 동작, 별도의 버튼 사용시 타입 지정 꼭 해주기

 

• <form> 태그 안에 <button> 태그를 사용하면, 기본적으로 버튼은 submit 버튼 역할을 한다.
• 즉, 버튼을 클릭하면 onClick 이벤트가 실행되고, form 제출 동작도 함께 발생하며 onSubmit 이벤트가 실행된다.

 

 

기본 동작

• <form> 안에 있는 <button>은 기본적으로 type="submit" 속성을 가진다.
• 사용자가 이 버튼을 클릭하면, 브라우저는 form의 데이터를 제출하고 onSubmit 이벤트를 발생시킨다. 동시에, 버튼의 onClick 이벤트가 실행된다.

 

 

왜 onSubmit이 실행되는가?

• <button> 기본 동작
  • 버튼을 클릭하면 type="submit"에 의해 폼이 제출되며 onSubmit 이벤트가 발생한다.
• onClick과 onSubmit의 실행 순서
  • 버튼 클릭 시 먼저 onClick 이벤트가 실행되고, 그 후에 onSubmit 이벤트가 실행된다.

 

 

해결 방법

button의 type을 설정하여 폼 제출을 막거나 onSubmit 이벤트를 제어할 수 있다.

 

 

1. type="button" 사용 (폼 제출 방지)

<button
  type="button"  // 이 버튼은 form을 제출하지 않음
  onClick={handleClick}
>
  클릭
</button>

이렇게 하면 버튼을 클릭해도 onSubmit 이벤트는 실행되지 않으며, 오직 onClick 이벤트만 실행된다.

 

 

2. type="submit" 사용 (폼 제출 및 onSubmit 실행)

<button
  type="submit"  // 이 버튼은 form을 제출하고 onSubmit 실행
  onClick={handleClick}
>
  제출
</button>

이렇게 하면 버튼 클릭 시 onSubmit 이벤트가 실행되며, form도 제출된다.

 

 

onSubmit 이벤트 제어

onSubmit 이벤트에서 event.preventDefault()를 사용하여 폼 제출을 막고 원하는 동작만 실행할 수 있다.

const handleSubmit = (event: React.FormEvent) => {
  event.preventDefault();  // 폼 제출을 막고 원하는 로직을 실행
  // 추가적인 폼 처리 로직
};

 

 

결론

• form 안의 button은 기본적으로 submit 버튼이므로,
• 버튼 클릭 시 onClick과 함께 onSubmit이 실행된다.
• 이를 막고 싶으면 button의 type을 button으로 설정하면 된다.