리엑트 Uncontrolled Components

Controlled components 와 Uncontrolled components

대부분의 경우 controlled components로 forms를 구현 합니다.

하지만 uncontrolled components 방식으로 구현할 수 있는데 차이점은 아래와 같습니다.

  • controlled components: form data를 React Component에 의해 처리

  • uncontrolled components : form data를 DOM에 의해 처리

Uncontrolled components 작성

uncontrelled components를 작성하기 위해서는 모든 state update에 대한 이벤트 핸들러를 작성하는 대신 ref 를 사용해서 DOM에 있는 form values를 가져오면 됩니다.

uncontrolled components를 작성하면 DOM 개발 방식을 유지할 수 있기 때문에 React와 non-React 코드를 같이 작성할 때 사용하면 유용합니다.

defaultValue , defaultChecked

React rendering lifecycle에서 form elements의 value attribute는 DOM안의 값을 대체합니다.

uncontrolled components에서 defaultValue attribute 를 통해 React에서 초기값 설정을 할 수 있습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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}>
        <input type="text" ref={this.input} defaultValue="Bob" />  
        <input type="checkbox" defaultChecked />
        <input type="radio" defaultChecked /> 
       
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

<input type="file" />

리엑트에서 <input type="file" /> 은 언제나 uncontrolled component 입니다. input의 value는 사용자에 의해 할당되기 때문입니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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')
);

요소별 값 정리

Element Value property Change callback New value in the callback
<input type="text" /> value="string" onChange event.target.value
<input type="checkbox" /> checked={boolean} onChange event.target.checked
<input type="radio" /> checked={boolean} onChange event.target.checked
<textarea /> value="string" onChange event.target.value
<select /> value="option value" onChange event.target.value

resource