https://ko.reactjs.org/docs/forms.html

HTML form : HTML form 엘리먼트는 form 엘리먼트 자체가 내부 상태(state)를 가지기 때문에, React의 다른 DOM 엘리먼트와 조금 다르게 동작

<!-- 순수 HTML : name을 입력받는 form -->
<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML form 동작을 수행. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다. 그러나 대부분의 경우, JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리합니다. 이를 위한 표준 방식은 “제어 컴포넌트 (controlled components)“라고 불리는 기술을 이용하는 것입니다.

제어 컴포넌트

HTML에서 input, textarea, select와 같은 form 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트.

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트

제어 컴포넌트 : React에 의해 값이 제어되는 입력 form 엘리먼트. 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어.

class NameForm extends React.Component {
  constructor(props) {
    // 기존 key - value 상속
    super(props);
    // 새로운 key - value 추가
    this.state = {value: ''};

    // 새로운 method 할당
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  // setState로 state 업데이트
  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} ₩={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

React(form) 21.05.06

제어 컴포넌트

CREAMer

제어 컴포넌트

Share this post