복잡한 폼 상태를 필드·검증·제출로 분리하기

상태 모델

values, errors, touched, submitStatus를 한 객체 또는 reducer로 정리한다.

field name과 value를 기준으로 해당 값만 갱신하고 필요한 검증을 예약한다.

비밀번호 확인, 날짜 범위처럼 여러 필드를 함께 보는 규칙을 분리한다.

제출 후 서버 validation 오류를 fieldErrors와 globalError로 나눠 매핑한다.

Reducer

상태 전이 fieldChanged, blurred, submitted, failed 사건으로 관리

setState 연쇄보다 명확

Schema

검증 규칙 zod/yup 등으로 타입과 오류 메시지를 통합 가능

서버 스키마와 drift 점검

비동기 점검

원격 검증 중복 이메일, 초대 코드 확인

debounce와 취소 필요

Server errors

최종 판정 클라이언트 통과 후 서버가 거절한 이유를 다시 표시

필드와 전역 오류 구분

전이 한 사용자 행동이 여러 state를 모순되게 바꾸지 않는다.

성능 필드 하나 입력이 전체 큰 폼을 과하게 렌더하지 않는다.

접근성 필드 오류와 설명이 input에 연결된다.

제출 요청 중 중복 제출과 오래된 검증 결과를 막는다.