(React) 제어 컴포넌트 (Controlled Component)

제어 컴포넌트 (Contorolled Component)

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

내용 더 알아보기

제어 컴포넌트를 공부했다면?

useState를 통해 컴포넌트 관리하기

useState 함수형 업데이트