Controlled Form

하나의 핸들러가 필드 이름을 보고 상태를 갱신합니다

각 input의 name과 value를 읽어 formData의 해당 키만 바꾸면 여러 입력 필드를 한 흐름으로 다룰 수 있습니다.

formData 예시

firstName 입력한 이름
lastName 입력한 성
age 입력한 나이

공통 onChange가 하는 일

1
event.target에서 name과 value를 읽음

어떤 필드가 바뀌었는지 name 속성이 구분합니다.

2
이전 formData를 복사

다른 필드 값은 그대로 보존합니다.

3
[name] 키만 새 값으로 교체

한 핸들러로 모든 입력 필드를 제어합니다.

입력 name 복사 교체