제어·비제어 컴포넌트의 소유권

값의 원본

현재 입력값을 state에서 읽을지 DOM에서 읽을지 먼저 정한다.

변경 처리

제어 방식은 onChange마다 state를 갱신하고 value로 다시 내려준다.

제출 처리

비제어 방식은 submit 시점에 ref나 FormData로 현재 값을 읽는다.

초기값 관리

제어는 value, 비제어는 defaultValue를 사용해 경고를 피한다.

Controlled

React가 값 보유 입력 즉시 검증, 버튼 활성화, 미리보기 구현에 적합

입력 수가 많으면 렌더 비용 고려

Uncontrolled

DOM이 값 보유 단순 제출 폼, 파일 input, 외부 라이브러리 연결에 유리

실시간 UI 연동은 약함

defaultValue

초기 DOM 값 처음 렌더 후 사용자가 바꾸는 값은 DOM이 관리

value와 혼용 금지

FormData

제출 시 수집 name 속성을 기준으로 값을 한 번에 읽음

checkbox와 multi value 처리 확인

전환 경고 · 파일 입력 · 검증 시점 점검

전환 경고 undefined value가 나중에 문자열로 바뀌며 경고를 내지 않는다.

파일 입력 file input은 비제어 방식으로 다룬다.

검증 시점 입력 중, blur, submit 중 어느 시점인지 정해져 있다.

초기화 제출 후 reset이 state와 DOM 값 모두에 일관되게 반영된다.

제어 입력

const [email, setEmail] = useState('');
<input value={email
        overflow-wrap: break-word;
        word-break: keep-all;
      } onChange={(e) => setEmail(e.target.value)} />