2022_01_06 React Form

공식문서 참조

• HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에
• React의 다른 DOM 엘리먼트와 다르게 동작

 

• HTML 에서 input, textarea, select 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 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>
    );
  }
}

• 이러한 setState 방식으로 접근해서 사용
• 제어 컴포넌트를 사용하면 input 값은 항상 React State에 의해 결정된다.
• 단, 코드를 조금 더 작성해야하지만
• 다른 UI에 전달하거나 다른 이벤트 핸들러에서 값을 재설정 해줄 수 있음

 

textarea 태그

<textarea>
  Hello there, this is some text in a text area
</textarea>

• HTML에서 사용하는 textarea
• React에서는 value 어트리뷰트를 대신 사용한다.

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

• state = { value: } 로 받아서 바로 실행가능

select 태그

HTML에서 select는 드롭 다운 목록을 만든다.

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

• 이런식으로 만들어줌

 

• React에서는 selected 어트리뷰트를 사용하는 대신 최상단 select 태그에 value 어트리뷰트를 사용
• 한 곳에서만 업데이트 하면되기 때문에 제어 컴포넌트에서 사용하기가 더 편함

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

• 내용이 길어진것 같지만 select value를 이용해서 제어하기 편해진다.