Controlled Form

제어 컴포넌트는 입력값을 state 한곳에 둡니다

사용자의 입력은 onChange를 지나 state에 저장되고, 폼 요소의 value는 다시 그 state를 받아 항상 같은 값을 보여줍니다.

기본 연결 value={name} onChange={handleChange} event.preventDefault()

1. 입력 변경

사용자가 타이핑

input, textarea, select에서 값이 바뀝니다.

2. 값 읽기

event.target.value가 현재 입력값을 알려줍니다.

3. state 갱신

setName 또는 setFormValues로 React 쪽 값을 바꿉니다.

4. value 반영

입력 요소는 state에서 내려온 값으로 다시 그려져 한 곳과 동기화됩니다.

여러 입력은 name으로 구분

name="email"과 [name]: value를 함께 쓰면 하나의 핸들러로 사용자 이름, 이메일, 비밀번호를 나누어 갱신할 수 있습니다.

제출과 예외 처리

폼 제출은 기본 새로고침을 막고 state 값을 사용하며, 파일 입력처럼 DOM 값이 필요한 경우에는 ref 방식을 선택합니다.