setState를 사용하지 말라, ref는 좋지 않다. 라는 글들이 많지만 이는 모순적이다.
하지만 “올바르게 사용하는 방법”과 “어떤게 선택의 기준인지”를 이해하는 것은 어렵다.

도대체 어떻게 form을 만들어야 할까?

form은 많은 웹어플리케이션의 중심이지만, 그럼에도 불구하고 아직 리액트에서 form handling은 약간… conrner stone(시작 단계?…)이다.

접근 방식의 차이와 각각 어떻게 사용해야 할지를 배워보자.

Uncontrolled

Uncontrolled inputs은 일반적인 HTML form inputs과 같다

class Form extends Component {
  render() {
    return (
      <div>
        <input type="text" />
      </div>
    );
  }
}

타이핑 시 input은 값을 기억하며, a ref 사용하여 값을 가져올 수 있다.
예를들면 Button의 OnClick handler에서

class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
    // do something with `name`
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => this._name = input} />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

다시 말해, 해당 값이 필요할 때 field에서 값을 'pull' 해야한다.