Single state flow

제어 컴포넌트는 state를 거쳐 다시 화면으로 돌아온다

React state = source

사용자 입력

input, textarea, select에서 값이 바뀌며 onChange가 실행된다.

이벤트의 value를 읽고 필요한 필드만 새 값으로 갱신한다.

state가 바뀌면 폼 요소의 value prop도 같은 값이 된다.

event.target.name으로 어떤 입력인지 확인하고, 같은 state 객체 안의 해당 키만 바꾼다.

username value={form.username}

email value={form.email}

password value={form.password}

핵심

화면의 값은 DOM 내부 상태가 아니라 React state를 반영한다. 그래서 검증, 초기화, 제출 처리를 같은 데이터 기준으로 다룰 수 있다.