controlled 입력과 uncontrolled 입력의 차이는 무엇인가요?

Question

Accepted Answer

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