결국 입력 값의 진실의 원천(source of truth)이 누구인가 — React state인가, DOM 자체인가 — 로 귀결됩니다.
Controlled (React가 값을 소유)
입력의 value는 state에 의해 구동되며, onChange가 state를 동기화 상태로 유지합니다. DOM은 항상 React를 반영합니다:
jsx
[name, setName] = ();
state가 진실의 원천이므로 모든 키 입력마다 검증, 포맷팅, 변환을 할 수 있습니다(예: 대문자 강제, 길이 제한, 제출 버튼 비활성화).
브라우저가 값을 보관하며, 필요할 때만 ref를 통해 읽습니다:
const inputRef = useRef(null);
<input defaultValue="" ref={inputRef} />;
// 제출 시: const value = inputRef.current.value;
<input type="file">은 항상 uncontrolled), 또는 비-React 위젯 통합. 코드가 적지만 변경이 일어날 때 즉시 반응할 수는 없습니다.둘을 혼합하는 것(value와 defaultValue를 모두 전달)은 흔한 실수이며 React 경고를 발생시킵니다.