소유권 선택
입력값으로 즉시 UI를 바꿔야 하면 제어, 제출 때만 필요하면 비제어도 검토한다.
모든 입력을 state로 올리는 것이 정답은 아니다제어 입력 연결
value와 onChange를 함께 두어 React state와 화면 값을 항상 맞춘다.
value만 주면 입력이 잠긴다비제어 입력 읽기
defaultValue로 초기값을 주고 submit에서 FormData나 ref로 현재 값을 읽는다.
defaultValue 변경은 기존 입력값을 덮지 않는다검증 상태 분리
touched, dirty, submitted, serverError를 나눠 오류 노출 시점을 조절한다.
처음부터 모든 오류를 보여주지 않을 수 있다특수 입력 확인
파일 입력, 한글 IME, 큰 텍스트 입력은 제어 방식이 경험을 해치지 않는지 테스트한다.
파일 input은 value를 직접 제어하지 않는다Controlled
상태 기반 UI
검색어 미리보기, 조건부 버튼, 실시간 검증처럼 값이 즉시 UI에
필요할 때 쓴다.
입력 지연을 확인한다
Uncontrolled
DOM 값 보관
제출 시점에만 값이 필요하거나 외부 폼 라이브러리가 DOM 값을
관리할 때 쓴다.
ref 읽기 시점을 명확히 한다
FormData
제출 시 수집
name 속성이 있는 입력을 한 번에 모아 서버나 action으로
보낸다.
name 누락은 데이터 누락이다
Server error
최종 업무 검증
중복 이메일, 권한, 재고 같은 서버 규칙 오류를 필드 또는 전역
오류로 되돌린다.
클라이언트 검증만 믿지 않는다