Form Schema

React Hook Form과 Yup 검증 파이프라인

폼 입력은 React Hook Form이 수집하고, Yup 스키마가 같은 규칙으로 클라이언트 검증 결과를 만든다.

폼 값이 검증 결과가 되는 순서

schema first

필드 등록

register가 입력 요소와 폼 상태를 연결한다.

스키마 작성

필수, 형식, 길이 같은 규칙을 Yup에 모은다.

resolver 연결

yupResolver가 폼 제출 전에 스키마 검증을 실행한다.

오류 표시

errors 객체를 통해 필드별 메시지를 화면에 보여준다.

inputregisterYup schemaresolvererrors
스키마 검증 해석

검증 규칙이 컴포넌트 곳곳에 흩어지면 수정이 어렵다. 스키마를 기준으로 폼 UI가 따라오게 잡는다.