react4,5

Controlled Component 와 Uncontrolled Component

상태를 가지고 있는 엘리먼트

• input
• select
• textarea
• …

엘리먼트의 ‘상태’ 를 누가 관리할까?

• 엘리먼트를 가지고 있는 컴포넌트가 관리 : Controlled
• 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유 : Uncontrolled

Controlled Component

components/Controlled.jsx (1)

import React from "react";

export default class Controlled extends React.Component {
  state = { value: "" };

  render() {
    return (
      <div>
        <input />
      </div>
    );
  }
}

components/Controlled.jsx (2)

import React from "react";

export default class Controlled extends React.Component {
  state = { value: "" };

  render() {
    const { value } = this.state;
    return (
      <div>
        <input value={value} onChange={this._change} />
      </div>
    );
  }

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

components/Controlled.jsx (3)

import React from "react";

export default 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 => {
    // console.log(e.target.value);
    this.setState({ value: e.target.value });
  };

  _click = () => {
    console.log("최종 결과", this.state.value);
  };
}

Uncontrolled Component

components/Uncontrolled.jsx (1)

import React from "react";

export default class Uncontrolled extends React.Component {
  _input = React.createRef();

  render() {
    return (
      <div>
        <input ret={this._input} />
      </div>
    );
  }
}

components/Uncontrolled.jsx (2)

import React from "react";

export default class Uncontrolled extends React.Component {
  _input = React.createRef();

  render() {
    return (
      <div>
        <input ref={this._input} />
        <button onClick={this._click}>전송</button>
      </div>
    );
  }

  _click = () => {
    console.log("최종 결과", this._input.current.value);
  };
}

hooks

필수

• useState
• useEffect
• useContext (Context API 애서 다룹니다.)

추가

• useReducer
• useCallback, useMemo
• useRef, useImperativeHandle,
• useLayoutEffect
• useDebugValue

Example1 : 기존

const {count} = this.state; this.setState({count: count + 1});

import React from "react";

export default class Example1 extends React.Component {
  state = {
    count: 0
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times</p>
        <button
          onClick={() => {
            this.setState({ count: count + 1 });
          }}
        >
          Click me
        </button>
      </div>
    );
  }
}

Example2

const [count, setCount] = useState(0);
const [스테이트 값, 스테이트 변경 함수] = useState(스테이트 초기값);

import React, { useState } from "react";

export default function Example2() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Example3

const [state, setState] = useState({count: 0});
const [스테이트 값, 스테이트 변경 함수] = useState(스테이트 초기값);

import React, { useState } from "react";

export default function Example3() {
  const [state, setState] = useState({ count: 0 });

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => setState({ count: state.count + 1 })}>
        Click me
      </button>
    </div>
  );
}

useState와 useEffect

• useState

  • state

• useEffect

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount