Transitioning from uncontrolled inputs to controlled - 정리

https://goshakkk.name/turn-uncontrolled-into-controlled/ 정리

• 비제어 폼으로 시작했어도 괜찮다. 만약 disabled submit, 즉각적인 검증이 필요해졌으면, 변경하면 된다.
• 순서는 간단하다.
  1. 모든 폼 제어를 분명하게 하자, textbox인지 select인지 checkbox인지
  2. 각 state를 초기화하자.
  3. input이 get할 수 있게 value prop을 사용하자.
  4. input의 value를 set할 수 있게 onChange를 사용하자.
  5. submit시에 각 state를 가지고 액션을 정의하자.

class ControlledForm extends Component {
  constructor() {
    super();
    this.state = {
      email: '',
      agree: false,
    };
  }

  handleSubmit = () => {
    const email = this.state.email;
    const agree = this.state.agree;
    ...
  };

  handleEmailChange = (evt) => {
    this.setState({ email: evt.target.value });
  };

  handleAgreeChange = (evt) => {
    this.setState({ agree: evt.target.checked });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="email" value={this.state.email} onChange={this.handleEmailChange} />
        <input type="checkbox" checked={this.state.agree} onChange={this.handleAgreeChange} />
      </form>
    );
  }
}