값 소유 결정
입력 중 화면이 즉시 상태를 사용해야 하는지, 제출 때만 읽어도 되는지 판단한다.
필요 이상으로 제어하면 렌더 비용이 늘 수 있다제어 입력 구현
value와 onChange를 연결해 React state가 항상 화면 값을 반영하게 한다.
value만 주고 onChange가 없으면 입력이 잠긴다비제어 입력 구현
defaultValue로 초기값을 주고 제출이나 blur 시 ref.current.value를 읽는다.
defaultValue 변경은 기존 DOM 값을 덮지 않는다특수 입력 분리
file input은 보안상 value를 직접 제어할 수 없어 ref와 FileList 흐름을 쓴다.
파일 선택은 DOM 소유에 가깝다IME와 성능 확인
한글 조합 입력, 대형 폼, 실시간 검증에서 입력 지연과 조합 깨짐을 테스트한다.
입력 경험이 최종 기준이다value
React 소유
검증, 조건부 버튼, 실시간 미리보기가 필요할 때 적합하다.
state 갱신이 빠르게 돌아야 한다
defaultValue
DOM 초기값
초기값만 주고 이후 값은 DOM이 관리하게 한다.
reset 동작을 별도로 확인한다
ref
필요할 때 읽기
제출 시점에만 값이 필요하거나 외부 라이브러리와 연결할 때
사용한다.
렌더와 값 변화가 분리된다
file
제어 불가 입력
파일 선택은 FileList를 읽고 업로드 상태만 React가
관리한다.
value를 코드로 설정하지 않는다