React class vs function 함수 라이프 사이클 사용법

---

📖 React class vs function 함수에서 라이프 사이클 구현 하기

---

제일 먼저 살펴볼 것은 어떻게 하면 render와 관련된 작업을 처리하는 funcComp 라고하는 함수가 실행된 후에 추가적으로 필요한 작업을 처리하게 할수 있을까 라는 것입니다. 이때 사용하는 것이 리액트의 useEffect() 입니다.

📖 lifecycle 구현

먼저 또다른 훅인 useEffect를 포합 시킵니다.import React, { useState, useEffect } from "react";

useEffect() 의 첫 인자는 함수여야합니다. 아래 작석한 useEffect()를 콘솔에서 확인해 보겠습니다.

func => render 1 func => useEffect 2

콘솔창에는 render 작업이 완전이 끝난 다음 useEffect 의 인자로 전달된 함수가 render가 끝난다음 호출되도록 약속 되어있습니다.

그 다음 html의 date버튼을 눌러서 값을 업데이트 해주면 다시 호출 됩니다.

func => render 3 App.js:25 func => useEffect4

useEffect는 class 방식의 componentDidMount, componentDidUpdate의 효과와 같습니다.

const funcStyle = "color:blue";
let funcId = 0;

function FuncComp(props) {
  const numberState = useState(props.initNumber);
  const number = numberState[0];
  const setNumber = numberState[1];

  const [_date, setDate] = useState(new Date().toString());

  useEffect(function () {
    console.log("%cfunc => useEffect " + ++funcId, funcStyle);
  });

  console.log("%cfunc => render " + ++funcId, funcStyle);

  return (
    <div className="container">
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <input
        type="button"
        value="random"
        onClick={function () {
          setNumber(Math.random());
        }}
      />
      <p>date : {_date}</p>
      <input
        type="button"
        value="date"
        onClick={function () {
          setDate(new Date().toString());
        }}
      />
    </div>
  );
}