입력칸을 state에 연결
value={text}
input이 화면에 드러내는 값은 항상 현재 text state를 기준으로 정해집니다.
제어 컴포넌트 입력값
사용자가 입력한 값은 이벤트 객체에서 읽고, setText로 저장한 뒤 다음 렌더에서 input과 미리보기 문구에 함께 반영됩니다.
사용자 입력을 읽기
e.target.value
이벤트 객체의 target에서 사용자가 방금 입력한 문자열을 가져옵니다.
다음 렌더 요청
setText(e.target.value)
text가 바뀌면 입력칸과 아래 미러 문구가 같은 값으로 다시 그려집니다.
타이핑
onChange
값 읽기
setText
렌더
미러 표시
핵심 차이
입력 DOM을 따로 조작해서 문구를 바꾸는 것이 아니라, text state 하나를 기준으로 input 값과 출력 문장을 동시에 렌더링합니다.