Form State Model

폼 필드 상태와 서버 오류

복잡한 폼은 입력값 객체 하나가 아니라 필드 등록, dirty/touched, 동기/비동기 검증, 서버 오류, 제출 상태를 분리해야 안정적입니다.

01

필드 등록

각 input의 name, 기본값, 검증 규칙, 표시 라벨을 registry에 연결합니다.

registry
02

사용자 입력

value를 갱신하고 dirty/touched 상태를 따로 기록해 피드백 시점을 제어합니다.

interaction
03

동기 검증

필수값, 길이, 형식처럼 즉시 판단 가능한 규칙을 먼저 적용합니다.

sync
04

비동기 검증

중복 확인, 권한 확인처럼 서버가 필요한 검증은 debounce와 취소를 둡니다.

async
05

제출과 서버 오류

서버 validation error를 field error와 form error로 나눠 화면에 되돌립니다.

submit
Field Error
특정 입력의 문제 email 형식, 비밀번호 길이처럼 필드 바로 아래에 보여줄 수 있습니다.
aria-describedby 연결
Form Error
전체 제출의 문제 로그인 실패, 결제 거절, 권한 부족처럼 폼 상단에 요약이 필요합니다.
focus 이동
Server Error
서버 판정 결과 클라이언트 검증을 통과해도 서버 규칙이 더 엄격할 수 있습니다.
source 표시

폼 품질 기준

피드백 시점 입력 중 즉시 오류를 보여줄지 blur 이후 보여줄지 UX 기준을 정합니다.
접근성 오류 메시지는 스크린리더가 필드와 연결해 읽을 수 있어야 합니다.
중복 제출 제출 중 버튼 비활성화와 idempotency 처리를 함께 고려합니다.