제어 컴포넌트 (Controlled Component)

• HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트
• 리액트 State를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 리액트 State와 form state 두 요소를 결합
• 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어

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>
    );
  }
}

• input 의 value 속성은 state 의 value 값과 신뢰 가능한 단일 출처 (single source of truth)가 된다
• 제어 컴포넌트로 사용하면, input의 값은 항상 React state에 의해 결정

비제어 컴포넌트

• 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어집니다.
• 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있습니다.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

• 비제어 컴포넌트는 DOM에 신뢰 가능한 출처를 유지한다.
• 제어 컴포넌트 일때보다 비제어 컴포넌트를 사용할 때 React와 non-React 코드를 통합하는 것이 쉬울 수 있다
• 일반적으로 제어된 컴포넌트를 사용해야 합니다

결론

• 성능상은 setState를 계속 호출하지 않는 비제어 컴포넌트가 좋을 수 있고 확장성은 제어 컴포넌트가 더좋다

https://ko.reactjs.org/docs/uncontrolled-components.html https://ko.reactjs.org/docs/forms.html