React Ch 7. Hooks & Context (1) ~ (2)

01.Basic Hooks (I)

• 클래스 컴포넌트에서만 state를 사용하고 라이프사이클을 사용할 수 있었던 부분을 function 컴포넌트에서도 사용가능하게 함
• state 로직을 재사용도 가능하게 함

useState 사용

state를 대체할 수 있음

(1) class 컴포넌트에서 state 사용

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.click}>Click me!</button>
      </div>
    );
  }

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

(2) function 컴포넌트에서 useState를 사용

import React from "react";

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

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

  function click() {
    setCount(count + 1);
  }
}

=> useState를 사용해서 function 컴포넌트 안에 특정 값을 state처럼 사용

(3) state 객체 사용

import React from "react";

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

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={click}>Click me!</button>
    </div>
  );

  function click() {
    setState((state) => {
      return {
        count: state.count + 1,
      };
    });
  }
}

02.Basic Hooks (II)

useEffect

라이프사이클 훅을 대체할 수 있음

• componentDidMount
• componentDidUpdate
• componentWillUnmount

(1) class 컴포넌트에서 라이트사이클 사용

import React from "react";

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

  render() {
    const { count } = this.state;

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={this.click}>Click me!</button>
      </div>
    );
  }

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

  componentDidUpdate() {
    console.log("componentDidUpdate", this.state.count);
  }

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

(2) function 컴포넌트에서 useEffect로 라이프 사이클 사용

import React from "react";

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

  // componentDidMount
  React.useEffect(() => {
    console.log("componentDidMount");
  }, []); 

  // componentDidMount & componentDidUpdate
    React.useEffect(() => {
      console.log("componentDidMount & componentDidUpdate by count", count);
    }, [count]); 

  // componentWillUnmount
  React.useEffect(() => {
    console.log("componentDidMount & componentDidUpdate by count", count);

    return () => {
      // cleanUp
      console.log("cleanup by count", count);
    };
  }, [count]);

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

  function click() {
    setCount(count + 1);
  }
}

=> useEffect는 두 가지 일을 다 해버림

• componentDidMount
• componentDidUpdate

=> useEffect는 여러 개 사용 가능(순차적으로 실행 됨)

=> 함수 뒤에 인자를 전달해주면 해당 인자에 의해서 랜더 될 때 함수가 실행되지 않음

=> useEffect 안에 return을 추가하면 componentWillUnmount 일을 함

• 다시 랜더되기 전에 return 먼저 실행
• cleanup