폼 상태 판단 기준

폼 방식은 값의 저장 위치와 검증 시점으로 선택한다

제어 컴포넌트와 비제어 컴포넌트의 차이는 입력값을 매 렌더 상태로 가질지, 제출 시점에 DOM에서 읽을지입니다.

01

제어 입력

실시간 검증, 조건부 UI, 제출 버튼 상태 제어가 필요하면 state가 입력값의 원천이 됩니다.

02

비제어 입력

제출 시점에만 값이 필요하거나 파일 입력처럼 React state와 맞지 않는 필드는 ref로 DOM 값을 읽습니다.

03

검증 시점

입력 중, blur 시점, 제출 직전 검증을 사용자 부담에 맞게 나눕니다.

1

source

값의 원천이 state인지 DOM인지 정합니다.

2

change

onChange에서 필요한 변환만 수행합니다.

3

validate

검증 시점과 메시지 노출 조건을 정합니다.

4

submit

전송 직전 데이터와 오류를 다시 확인합니다.