Form State

폼 처리 상태 분리

폼은 값을 모으는 UI이면서 서버 변경의 시작점이다. draft state, pending state, field error, global error를 섞지 않아야 사용자가 길을 잃지 않는다.

01

입력 책임 구분

제출 뒤 결과만 확인하는 폼은 uncontrolled form과 server action으로 충분하고, 즉시 미리보기나 복잡한 조건이면 client state가 필요하다.

02

제출 중 중복을 막는다

pending 상태에서 버튼을 비활성화하거나 같은 액션 중복 호출을 방지한다.

03

서버 오류를 필드에 연결한다

schema 검증 결과를 field별 메시지로 되돌려 사용자가 어디를 고칠지 알게 한다.

uncontrolled
HTML 기본 흐름 FormData로 서버에 보내기 쉽고 클라이언트 상태가 적다.
제출 시점 검증에 맞다.
controlled
즉시 반응 입력값을 React state로 관리해 미리보기와 조건부 UI에 유리하다.
렌더 비용을 본다.
pending
중복 방지 제출 중 표시와 비활성화를 통해 사용자가 반복 클릭하지 않게 한다.
낙관적 UI와도 연결된다.
server error
권위 검증 서버가 반환한 오류를 form state로 표시한다.
클라이언트 검증만 믿지 않는다.

중복 제출 · 오류 위치 · 초기값 점검

중복 제출 느린 네트워크에서 같은 form이 여러 번 저장되지 않는가.
오류 위치 서버 검증 실패가 필드 근처에 표시되는가.
초기값 수정 폼에서 서버 데이터와 입력 중 변경값이 충돌하지 않는가.

상태 분리

// draft: input value
// pending: submission in flight
// fieldErrors: validation result
// success: redirect or refresh