Form State

제어/비제어 폼 입력 흐름 비교

폼 값이 React state에 있는지 DOM ref에 남아 있는지가 두 방식의 차이를 만든다.

입력 값이 흐르는 경로

form flow

User Input

사용자가 input에 값을 입력하며 이벤트가 발생한다.

Controlled

onChange가 값을 state에 저장하고 value로 다시 렌더링한다.

Validation

state를 기준으로 즉시 검증과 버튼 상태 제어가 가능하다.

Uncontrolled

DOM이 값을 들고 있고 필요할 때 ref로 읽는다.

Ref Read

submit 시점에 current.value를 확인해 처리한다.

Tradeoff

복잡한 폼은 제어, 단순 입력은 비제어가 가벼울 수 있다.

입력state/ref검증제출
읽는 법

제어 컴포넌트는 값의 원천을 React로 가져오는 방식이다. 그래서 검증과 UI 동기화가 쉬워진다.