CONTROLLED FORM

제어 컴포넌트는 입력값을 React state로 왕복시킨다

사용자가 입력한 값은 DOM에만 머무르지 않고 onChange, state, value를 거쳐 다시 화면에 반영됩니다.

입력 데이터 왕복

Flow

1 사용자 입력 input, textarea, select에서 change 이벤트가 발생합니다.

2 onChange event.target.value와 name을 읽어 다음 상태를 만듭니다.

3 setState React state가 폼 값의 단일 진실 공급원이 됩니다.

4 value 반영 렌더링된 value, checked가 실제 폼 요소를 다시 제어합니다.

Check

name 여러 입력을 하나의 핸들러로 처리할 때 필드 이름으로 분기합니다.

preventDefault form submit의 새로고침을 막고 React 흐름 안에서 처리합니다.

validation state 기반으로 빈 값, 길이, 형식을 즉시 검사할 수 있습니다.

ref 파일 입력이나 외부 라이브러리처럼 DOM 값이 필요한 경우에 씁니다.