React Hook Form

React Hook Form(RHF)은 React에서 폼을 효율적으로 다룰 수 있게 해주는 라이브러리

✅ 장점

1. 성능 최적화

• 입력값 변경 시 전체 폼이 아닌 해당 필드만 추적
• useState 기반 폼보다 리렌더링이 훨씬 적음

2. 간결한 코드

• onChange, setState, onBlur 등을 직접 작성할 필요 없음
• register()만으로 상태 관리, 유효성 검사, 에러 추적까지 가능

3. 유효성 검사 유연성

• 기본 내장 검사 사용 가능 (required, minLength, pattern, validate)
• Zod, Yup, Joi 등 외부 스키마와도 쉽게 연동 가능(resolver 사용)

4. 조건부 필드 및 동적 폼 처리 용이

• watch()로 실시간 값 추적
• useFieldArray() 로 반복되는 입력 필드 처리

5. 타입스크립트와의 궁합

• useForm<FormData>()로 타입 추론 가능
• zodResolver 와 함께 쓰면 타입 안정성 극대화

Zod를 연습해 보다가 RHF도 같이 사용하면 좋다고 해서 한번 사용해봤는데, 장점이 꽤나 많은 거 같아서 정리를 해야겠다고 생각했다. {...register('필드이름')}을 써주면 useState로 onChange해줄 필요도 없어지고, 유효성 검사도 추가할 수 있고 간편하게 코드를 작성할 수 있다는 많은 장점이 있어 보였다. 앞으로 폼을 작성할 때 적극적으로 도입할 듯하다.