제어 컴포넌트와 비제어 컴포넌트는 값의 소유자가 다르다

React state가 input value를 소유하면 제어 컴포넌트, DOM ref가 현재 값을 들고 있다가 필요할 때 읽으면 비제어 컴포넌트입니다.

1

controlled

value와 onChange를 연결해 입력값, 검증 메시지, 제출 가능 여부를 React state로 즉시 계산합니다.

2

uncontrolled

defaultValue와 ref로 DOM 값을 유지하고 제출 시점에 필요한 값만 읽습니다.

3

하이브리드 규칙

파일 입력처럼 브라우저가 관리하는 값은 비제어 방식이 자연스러울 수 있습니다.

4

value

value만 두고 onChange가 없으면 입력이 잠깁니다.

5

default

초기값만 필요하면 defaultValue를 고려합니다.

핵심제어 컴포넌트와 비제어 컴포넌트는 값의 소유자가 다르다은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.