HTML에서 <input>
, <textarea>
, <select>
와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.
React state를 "신뢰 가능한 단일 출처(single source of truth)"로 만들어 두 요소를 결합할 수 있다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자의 입력값을 제어한다. 이러한 방식으로 React에 의해 값이 제어되는 입력폼 엘리먼트를 제어 컴포넌트(controlled component)라고 한다.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
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 어트리뷰트는 폼 엘리먼트에 설정되므로 표시되는 값은 항상 this.state.value
가 되고, React state는 신뢰 가능한 단일 출처가 된다. React State를 업데이트 하기 위해 모든 키 입력에서 handleChange
가 동작하기 때문에 사용자가 입력할 때 보여지는 값이 업데이트 된다.
제어컴포넌트를 사용하면, input의 값은 항상 React state에 의해 결정된다.
코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있다.