React
양식 및 사용자 입력

제어되는 구성 요소

제어되는 양식 구성 요소는 value 등록 정보로 정의됩니다. 통제 된 입력의 가치는 React에 의해 관리되며, 사용자 입력은 렌더링 된 입력에 직접적인 영향을 미치지 않습니다. 대신 value 속성을 변경하면이 변경 사항을 반영해야합니다.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: ''
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          value={this.state.name} />
      </div>
    )
  }
}

위 예제는 value 속성이 입력의 현재 값을 정의하고 onChange 이벤트 핸들러가 사용자의 입력으로 구성 요소의 상태를 업데이트하는 방법을 보여줍니다.

양식 입력은 가능한 경우 통제 된 구성 요소로 정의해야합니다. 이렇게하면 값이 사용자 입력이 아닌 다른 트리거에 의해 변경 되더라도 구성 요소 상태와 입력 값이 항상 동기화됩니다.

제어되지 않는 구성 요소

통제되지 않은 구성 요소는 value 속성이없는 입력입니다. 제어되는 구성 요소와는 반대로, 구성 요소 상태와 입력 값을 동기화 된 상태로 유지하는 것은 응용 프로그램의 책임입니다.

class Form extends React.Component {
  constructor(props) {
    super(props);
    
    this.onChange = this.onChange.bind(this);
    
    this.state = {
      name: 'John'
    };
  }
  
  onChange(e) {
    this.setState({
      name: e.target.value
    });
  }
  
  render() {
    return (
      <div>
        <label for='name-input'>Name: </label>
        <input
          id='name-input'
          onChange={this.onChange}
          defaultValue={this.state.name} />
      </div>
    )
  }
}

여기서 구성 요소의 상태는 제어되는 구성 요소와 마찬가지로 onChange 이벤트 핸들러를 통해 업데이트됩니다. 그러나 value 속성 대신 defaultValue 속성이 제공됩니다. 첫 번째 렌더링 중에 입력의 초기 값을 결정합니다. 이후의 구성 요소 상태 변경은 입력 값에 자동으로 반영되지 않습니다. 이것이 요구된다면 대신 통제 된 구성 요소가 사용되어야한다.