Controlled Input 데이터 흐름

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

2 event

값을 읽는다

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

3 state

state에 저장한다

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

4 render

다시 그린다

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

5 sync

화면이 맞춰진다

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

controlled

값의 주인은 React state

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

핵심Controlled Input 데이터 흐름은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.