React Hook Form

폼 검증 재현과 교정

필수값, 형식, 일치 여부를 차례로 깨뜨려 보면 Yup 스키마와 errors 표시가 제대로 연결됐는지 확인하기 쉽습니다.

1

필수값 누락

빈 폼 제출로 required 메시지를 확인합니다.

2

형식 오류

이메일, 길이, 문자 조건을 일부러 어깁니다.

3

교정 입력

조건을 만족하도록 값을 고쳐 오류가 사라지는지 봅니다.

4

제출 성공

등록 중 상태와 폼 초기화까지 이어지는지 확인합니다.

화면에서 볼 것

errors 객체 필드별 메시지가 알맞은 위치에 표시됩니다.
isSubmitting 제출 중에는 버튼 문구와 비활성 상태가 바뀝니다.
reset 성공 후 입력값이 초기 상태로 돌아갑니다.

실습 흐름

누락 형식 교정 성공