Controlled and Uncontrolled Component in React

아래의 내용은 기사를 번역 한 것 입니다.
생략하거나 간추린 내용이 있습니다.
블로그의 주인이자 번역을 하는 필자는 멍청이입니다.

-----------(이하 내용)--------------

"setState를 사용해서는 안됩니다."라는 기사를 보았으면서 동시에 어떤 문서는 "refs are bad"라고 주장하고 있다 ... 이 새끼들이?!  무엇이 잘 하는 것인지 무엇을 선택하는 지에 대한 기준을 이해하기 매우 어렵다. 도대체 어떻게 form을 만들어야 하는가? 결국 form은 많은 웹 앱의 핵심 요소이다. 그럼에도 불구하고 React에서의 form 핸들링은 약간의 ... corner stone? (역자 주: 뭔 소리를 하길래 corner stone이라는 단어를 썼는지 1도 모르겠다. asshole이나 moron이 더 적절해 보이는데...) 그러나 더 이상 두려워하지 마라. 접근법의 차이점과 각 접근법을 사용해야 할 때를 살펴보자.


The Uncontrolled

Uncontrolled inputs는 전통적인 HTML form inputs과 비슷하다.

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

 그 것들은 당신이 무엇을 기입했는지를 기억한다. 당신은 ref를 통해서 value를 얻을 수 있다. 예를 들어 버튼의 onClick 핸들러 안에서

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에서 value를 끌어올 수 있다. 이 것은 form이 제출 될 때 발생할 수 있다.

이 것이 form inputs을 구현하는데 제일 단순한 방법이다. 분명히 그 것을 사용하는 타당한 사례가 있다.

1. 실제 세계의 간단한 형태.
2. 그리고 React를 배울 때.

그다지 강력하지는 않다. 따라서 controlled input을 살펴보자.


The Controlled

Controlled input은 value를 바꾸는 callback뿐만 아니라 current value를 prop으로 받는다. 당신은 이게 더 '리액트다운 방법'이라고 접근할 수 있을 것이다.

<input value={someValue} onChange={handleChange} />

 이 input의 value는 어딘가에 있는 state에서 살아 있어야 한다. 일반적으로 input을 렌더링하는 component (a.k.a the form component)는 해당 state를 다음과 같이 저장합니다.

class Form extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
      </div>
    );
  }
}


새 문자를 입력 할 때마다 handleNameChange가 호출된다. input의 새 value를 가져 와서 state로 설정한다.

이러한 흐름은 value의 변화를 form component에 밀어내기에, form component는 명시적인 요청이 필요 없이 언제나 input의 current value를 갖게 된다.

이는 데이터 (state)와 UI (input)가 항상 동기화되어 있음을 의미. state는 value을 input에 제공하고 input은 현재 value을 변경하도록 Form에 요청.

이는 또한 form component가 입력 변경에 즉시 응답 할 수 있음을 의미. 예를 들면:

• 유효성 검사와 같은 적절한 위치 피드백
• 모든 필드에 유효한 데이터가 없으면 버튼 비활성화
• 신용 카드 번호와 같은 특정 입력 형식 강제

그러나 그 중 어떤 것도 필요로하지 않고 uncontrolled가 더 간단할 것이라 판단되면 그렇게 할 것!

무엇이 'controlled' element를 만드는가?

물론 다른 form element가 있다. checkbox와 radio가 있고, selects과 textareas가 있다.bform element는 prop을 통해 value를 설정하면 "controlled"가 된다.  that's it. 각 form element는 그 value을 설정하는데 있어 다른 prop을 가지고 있다.

결론

 controlled와 uncontrolled form field는 모두 장점이 있다. 구체적인 상황을 평가하고 접근 방식을 선택할 것.

당신의 form이 UI 피드백 측면에서 매우 간단하다면, uncontrolled와 refs가 좋다. 다양한 기사가 말하는 "나쁘다"는 말을 들을 필요가 없다.

출처: Controlled and uncontrolled form inputs in React don't have to be complicated,
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/