React _ Controlled Component와 Uncontrolled Component

• 상태를 가지는 element: input, select, textarea 등
• element의 상태(state)를 누가 관리하느냐?
  컴포넌트가 직접 관리 -> Controlled
  컴포넌트가 관리하지 않고 엘리먼트의 참조만 소유 -> Uncontrolled

1. Controlled Component

import React from "react";

class Controlled extends React.Component{
  state = { // 상태 저장
    value: "" 
  };
  
  render(){
    const { value } = this.state;
    return(
      <div>
        <input value={value} onChange={this.change} /> // 상태 전달
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  change = (e) => { 
    this.setState({
      value: e.target.value // 상태 관리
    });
  };
  click = () => { 
    console.log(this.state.value); // 상태 전송
  };

}

export default Controlled;

2. Uncontrolled Component

• (React에서 Virtual DOM 사용하므로) real DOM에 접근하거나 변조 가하는 것 선호하지 않음 -> 지양하기

class Uncontrolled extends React.Component{
  render(){
    return(
      <div>
        <input id="my-input" />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  click = () => { 
    const input = document.querySelector("#my-input");
    console.log(input); 
  };
}

export default Controlled;

3. Uncontrolled + Ref

class Uncontrolled extends React.Component{
  
  inputRef = React.createRef();
  
  render(){
    return(
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
    </div>
    );
  }

  click = () => { 
    // 클릭하면 inputRef에서 값 꺼내오는 역할
    console.log(this.inputRef.current.value); 
  };
}

export default Controlled;

🌟 일반적으로, 연속적으로 바뀌는 값에 대하여 검사할때는 controlled/ 특정 행동에 대해 액션 취할때는 ref 사용