controlled input

제어 컴포넌트는 입력값을 state를 거쳐 화면으로 돌려보낸다

input의 value는 state에서 오고 onChange는 새 값을 state에 저장한다. 그래서 화면 값과 React 상태가 하나의 원천으로 묶인다.

01 State value 보유 단일 원천
02 Input value prop 화면에 값 표시
03 onChange 사용자 입력 새 값 읽기
04 setState state 갱신 다음 value 전달
부분
책임
깨지는 경우
value
state와 연결
입력이 잠김
onChange
새 값 저장
화면이 안 바뀜
검증
handler에서 처리
렌더마다 값 변형
초기값
state 초기화
controlled/uncontrolled 경고
핵심 제어 컴포넌트는 DOM 입력값을 React state의 결과로 만들 때 안정적이다.