value와 onChange를 연결해 입력값, 검증 메시지, 제출 가능 여부를 React state로 즉시 계산합니다.
폼 제어 선택 기준
제어 컴포넌트와 비제어 컴포넌트는 값의 소유자가 다르다
React state가 input value를 소유하면 제어 컴포넌트, DOM ref가 현재 값을 들고 있다가 필요할 때 읽으면 비제어 컴포넌트입니다.
defaultValue와 ref로 DOM 값을 유지하고 제출 시점에 필요한 값만 읽습니다.
파일 입력처럼 브라우저가 관리하는 값은 비제어 방식이 자연스러울 수 있습니다.
value만 두고 onChange가 없으면 입력이 잠깁니다.
초기값만 필요하면 defaultValue를 고려합니다.
실시간 검증은 제어 컴포넌트가 유리합니다.
값을 드물게 읽으면 ref 방식이 단순합니다.