[React] 함수형 useEffect

1. 예시 코드

import React, { useEffect, useState } from "react";

const BlockFn = () => {
  const [num, setNum] = useState(0);
  const [num2, setNum2] = useState(0);
  useEffect(() => {

    console.log("componentDidMount");
  }, []);


  useEffect(() => {
    console.log(num);
    console.log("componentDidMount");
  }, [num, num2]);
  const add = () => {
    setNum(num + 1);
    console.log(num);
  };
  return (
    <div>
      <button onClick={add}>증가</button>
    </div>
  );
};

export default BlockFn;

 

2. useEffect

useEffect 함수가 함수형에서도 생명주기 함수를 사용할수 있게 해준다.

리액트에서 지원해주는 유용한 함수 리액트훅(react hock)이다.

 

useEffect 함수의 두번째 매개변수가 빈배열이라는 것은 componentDidMount 라는 것이다.

useEffect 첫번째 콜백안에서 데이터를 불러와서 UI에 뿌려준다.

 

3. componentDidUpdate는 어떻게 만드는지

num값을 주시하고 있다.

배열안에 추가한 값을 주시하다가 바뀌면 실행된다.

componentDidMount + componentDidUpdate 이기 때문에 조건으로 처리해줘야 한다.