리액트 공부하기 - hook form

hook form에서 form 태그가 필요한 이유

할룽

---

React Hook Form을 쓸 거면 <form> 태그는 꼭 있어야 해!
왜냐면, React Hook Form은 HTML <form>의 submit 동작을 기반으로 작동하기 때문이야.

 

 왜 꼭 <form> 태그로 감싸야 할까?

1. submit 이벤트의 중심은 form이다

• React Hook Form에서 사용하는 handleSubmit은 form의 submit 이벤트를 감지해서 유효성 검사를 하고 데이터를 처리해.
• 이 submit 이벤트는 <form onSubmit={...}> 안에서만 자연스럽게 동작해.
• 버튼만 클릭하는 게 아니라 Enter 키를 눌러도 폼 제출이 가능하게 하려면 <form>이 필요해.

 

2. 웹 표준과 접근성

• <form> 태그는 브라우저와 스크린 리더 등 보조 기기들이 이해할 수 있는 웹 표준 구조야.
• 이걸 안 쓰면 접근성이 떨어지고 웹 앱이 엉성해 보여.

 

3. 브라우저의 자동 동작을 활용

• 자동으로 input 포커스 이동
• type="submit" 버튼 클릭 시 제출
• Enter 키로 제출
• <form> 안에서 <input>을 쓰면 이런 기능들이 기본 제공됨

 

4. React Hook Form의 내부 로직이 form을 전제로 동작

React Hook Form은 기본적으로 이렇게 사용하지?

<form onSubmit={handleSubmit(onValid)}>
  <input {...register("email", { required: true })} />
  <button type="submit">제출</button>
</form>

이 handleSubmit() 함수는 form이 submit되는 순간에 호출되도록 설계되어 있어.
만약 <form>이 없으면, 그 submit 이벤트가 아예 발생하지 않아서 내부 로직도 무용지물이 돼.

 

✅ submit 이벤트 중심	handleSubmit이 동작하려면 form의 submit 이벤트가 필요
✅ 웹 표준	브라우저가 form 구조를 이해하고 자동 기능 제공
✅ Enter로 제출 가능	input에서 Enter 누르면 자동으로 submit됨
✅ 접근성 보장	스크린리더 등에서 구조 이해 가능
✅ React Hook Form 구조상 필수	내부 로직이 form 이벤트를 기반으로 만들어짐