[React] Controlled, Uncontrolled Component

Controlled, Uncontrolled Component

• 상태를 가지고 있는 엘리먼트
  • input
  • select
  • textarea
  • …
• 엘리먼트의 ‘상태’를 누가 관리하느냐
  • 엘리먼트를 가지고 있는 Component가 관리
    • Controlled
  • 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 Component가 소유
    • Uncontrolled

- Controlled Components

// src/components/ControlledComponent.jsx

import React from "react";

class ControlledComponent 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 ControlledComponent;

// src/App.js

import logo from "./logo.svg";
import "./App.scss";
import ControlledComponent from "./components/ControlledComponent";

function App() {
  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <ControlledComponent />
      </header>
    </div>
  );
}

- Uncontrolled Components

// src/components/UncontrolledComponents.jsx
import React from "react";

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

  render() {
    console.log("initial render", this.inputRef);
    return (
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

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

  click = () => {
    // input 엘리먼트의 현재 상태 값 (value) 를 꺼내서 전송
    // const input = document.querySelector("#my-input");
    // console.log(input.value);  // 지양
    console.log(this.inputRef.current.value);
  };
}

export default UncontrolledComponent;

// src/App.js

import logo from "./logo.svg";
import "./App.scss";
import ControlledComponent from "./components/ControlledComponent";
import UncontrolledComponent from "./components/UncontrolledComponent";

function App() {
  return (
    <div className="App">
      <header className="header">
        <img src={logo} className="logo" alt="logo" />
        <ControlledComponent />
        <UncontrolledComponent />
      </header>
    </div>
  );
}