React · Basic Forms

controlled input의 화면 상태와 제출 상태

폼 다루기는 input 값을 state에 넣는 예제에서 멈추지 않고, 입력 중인 값과 검증 오류, 제출 중 상태를 서로 다른 책임으로 관리해야 한다.

01

초기값

각 필드의 기본값을 정하고 undefined에서 문자열로 바뀌는 경고를 피한다.

02

입력 동기화

onChange에서 필드 값을 갱신하고 필요한 경우 touched를 표시한다.

03

필드 오류

필수값과 형식 오류를 필드별로 계산해 메시지를 연결한다.

04

제출

submit에서는 기본 동작을 막고 검증 통과 후 요청 또는 결과 처리를 진행한다.

value
제어 입력 React state가 input의 현재 값을 소유
초기값을 빈 문자열로 고정
touched
오류 표시 시점 입력 전부터 오류를 보여주지 않도록 제어
blur와 submit에서 갱신
fieldErrors
필드별 오류 name을 key로 메시지를 저장
aria-describedby 연결
pending
중복 제출 방지 요청 중 버튼 비활성화와 진행 표시
실패 후 복구

새로고침 · 필드 연결 · 초기 상태 점검

새로고침 submit이 브라우저 기본 제출로 페이지를 새로고침하지 않는다.
필드 연결 오류 메시지가 어떤 입력의 오류인지 명확하다.
초기 상태 빈 폼에서 controlled/uncontrolled 경고가 나지 않는다.
제출 상태 요청 중, 성공, 실패가 같은 버튼 텍스트로 뭉개지지 않는다.