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)”라고 불리는 기술을 이용하는 것입니다.

1. 제어 컴포넌트 (Controlled Component)

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의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.