리액트 고급 가이드 - Uncontrolled Components

개요

 대부분의 경우, 우리는 controlled components를 추천한다. controlled component에서는, form data는 리액트 컴포넌트로 다루어진다. 대체재로 uncontrolled components가 있는데 DOM 자체에서 form data를 다룬다.

 uncontrolled components를 작성하려면 모든 state 업데이트에 대한 event handler를 작성하는 대신 ref를 사용하여 DOM에서 form values을 가져올 수 있다.

예를 들어,이 코드는 uncontrolled components에서 단일 이름을 허용한다:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

uncontrolled component가 DOM에 source of truth를 유지하므로 uncontrolled component를 사용할 때 React 및 Non-React 코드를 통합하는 것이 더 쉬울 수 있다. 빠르고 더럽게 되려면 코드가 약간 적을 수도 있다. 그렇지 않으면, 일반적으로 controlled component를 사용해야 한다.

Default Values

React rendering lifecycle에서 form component의 value attribute는 DOM의 value보다 우선한다. uncontrolled component를 사용하면서, React가 initial value를 지정하지만 후속 업데이트를 uncontrolled로 남겨두는 것을 원할 때가 있다. 이 경우를 처리하기 위해 value 대신 defaultValue attribute를 지정할 수 있다.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={this.input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

마찬가지로 <input type = "checkbox"> 및 <input type = "radio">는 defaultChecked를 지원하고 <select> 및 <textarea>는 defaultValue를 지원한다.

The file input tag

HTML에서는 <input type = "file">을 사용하여 사용자가 장치 저장소에서 하나 이상의 파일을 선택하여 서버에 업로드하거나 File API를 통해 JavaScript로 조작 할 수 있다.

<input type="file" />

React에서 <input type = "file"/>은 value가 사용자에 의해서만 설정 될 수 있고 프로그래밍 방식으로 설정 될 수 없으므로 항상 uncontrolled component이다.

File API를 사용하여 파일과 상호 작용해야 한다. 다음 예제는 DOM 노드에 대한 ref를 작성하여 제출 핸들러의 파일에 액세스하는 방법을 보여준다.

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);


참조: 리액트 16.3 공식 문서 영문판