Controlled Component & Uncontrolled Component

상태를 가지고 있는 요소

<input/>, <select/>, <textarea/> 등...

요소의 상태를 누가 관리하는지에 따라 구분된다.

• Controlled Component : 요소를 가지고 있는 컴포넌트가 관리하고 업데이트한다.
• Uncontrolled Component : 요소의 상태를 관리하지 않고, 요소의 참조만 컴포넌트가 소유한다.

Controlled Component

일반적으로 제어 컴포넌트는 입력을 렌더링하는 컴포넌트에서 해당 상태를 저장한다.

class ControlledComponent extends React.Component {
  state = {
    value: "",
  };

  render() {
    const { value } = this.state;
    return (
      <div>
        <input type="text" value={value} onChange={this.change} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  change = (e) => {
    // console.log(e.target.value);
    this.setState({ value: e.target.value });
  };

  click = () => {
    console.log(this.state.value);
  };
}

Uncontrolled Component

사용자가 입력한 것을 기억하고, ref를 사용하여 겂을 얻을 수 있다.
필요할때 필드에서 값을 가져와야한다.

class UncontrolledComponent extends React.Component {
  inputRef = React.createRef();

  render() {
    return (
      <div>
        <input type="text" id="input" ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  componentDidMount() {
    console.log(this.inputRef);
  }

  click = () => {
    const input = document.querySelector("#input"); 
    //실제 DOM에 접근하는 방식으로 React에서 지양하는 방식이다.
    console.log(this.inputRef.current.value);
  };
}

직접DOM에 접근해야하는 경우

• input,textarea에 포커스할때
• 크기,스크롤위치를 가져올때