Controlled Input
입력값은 state를 거쳐 다시 input으로 돌아온다
제어 컴포넌트의 핵심은 DOM이 값을 혼자 보관하지 않고, React state가 값을 읽고 다시 value로 내려보내는 왕복 흐름이다.
input
사용자가 타이핑하는 표면
text
React가 기억하는 실제 값
value
state에서 내려오는 input 표시값
1 type

사용자가 입력한다

브라우저 input에서 변경 이벤트가 시작된다.

안녕
2 event

값을 읽는다

onChange에서 현재 문자열을 꺼낸다.

e.target.value
3 state

state에 저장한다

React가 기억하는 단일 값이 바뀐다.

setText("안녕")
4 render

다시 그린다

value와 화면 문구가 같은 state를 읽는다.

value={text}
5 sync

화면이 맞춰진다

input과 미리보기가 같은 값으로 유지된다.

input = preview = "안녕"
controlled

값의 주인은 React state

검증, 글자 수, 미리보기처럼 입력 중 화면 반응이 필요할 때 쓴다.

state → value → input
uncontrolled

값의 주인은 DOM

파일 입력이나 단순 제출처럼 중간 화면 제어가 적을 때 쓴다.

ref → submit 때 읽기