HTML Form Element는 Form Element 자체가 내부 상태를 가지기 때문에, React의 다른 DOM Element와 다르게 동작합니다. 예를 들어, 순수한 HTML에서 이 Form은 name을 입력받습니다.
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>
이 form은 사용자가 form을 제출하면 새로운 페이지로 이동하는 기본 HTML form 동작을 수행합니다. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다.
그러나 대부분의 경우, JavaScript 함수로 form 의 제출을 처리하고 사용자가 form에 입력한 데이터에 접근하도록 하는 것이 편리합니다.
이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)”라고 불리는 기술을 이용하는 것입니다.
HTML에서 <input>, <textarea>, <select> 와 같은 form element는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다.
React에서는 변경할 수 있는 state가 일반적으로 Component의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)”로 만들어 두 요소를 결합할 수 있습니다. 그러면 form을 렌더링하는 React Component는 form에 발생하는 사용자 입력값을 제어합니다.
<input 태그>
constructor(props) {
super(props);
this.state = {value: ''};
}
handleChange = (event) => {
this.setState({value: event.target.value});
}
handleSubmit = (event) => {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
value 속성은 form element에 설정되므로 표시되는 값은 항상 this.state.value 가 되고 React state는 신뢰 가능한 단일 출러 (single source of truth)가 됩니다.
React state 를 업데이트하기 위해 모든 키 입력에서 handleChange가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트됩니다.
제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정됩니다. ★
코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI Element에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.