이전 글에선 class형 component에서의 lifecycle을 살펴보았다.
이번 글에선 functional (함수형) component의 lifecycle에 대해 살펴보자!

1. functional component lifecycle?

함수형 컴포넌트에서는 class 컴포넌트와 달리 useEffect 하나로 다 해결 할 수 있다!

의존성 배열(dependency array)?
functional component lifecycle은 useEffect 하나지만 의존성 배열 여부에 따라 구분된다.
의존성 배열은 useEffect Hook에 입력하는 두 번째 매개변수를 의미한다.

(1) componentDidMount

의존성 배열이 비어있으므로 렌더링 될 때마다 호출된다.

useEffect (() => {}, [])

(2) componentDidUpdate

class component lifecycle 중 componentDidUpdate와 비슷하다.
그러나, useEffect는 렌더링되면 무조건 한 번 실행되기 때문에 componentDidUpdate와 달리 렌더링 후 한 번 실행이 된다는 차이점이 있다.

// 하나라도 바뀌면 리렌더링
useEffect(() => {})

// someState가 수정될 때만 리렌더링
useEffect(() => {}, [someState])

(3) componentWillUnmount

렌더링된 화면에서 나가면 실행돼야 할 부분을 return에 작성해준다.

useEffect(() => {
	return (() => { })
})

2. functional component lifecycle 살펴보기

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function FunctionCounterPage() {
  const router = useRouter();

  const [count, setCount] = useState(0);

  // componentDidMount
  useEffect(() => {
    console.log("그려지고 나서 실행!");
  }, []);

  // componentsDidUpdate (단, useEffect는 처음 그려지고 나서 한 번 실행된 후에 변경된 때에도 실행됨 (두 번 실행))
  useEffect(() => {
    console.log("변경되고 나서 실행!");
  });

  // componentWillUnmount
  useEffect(() => {
    return () => {
      console.log("사라질 때

 실행!");
    };
  }, []);

// <componentDidMount, componentWillUnmount 하나로 합치기 가능>
//  useEffect(() => {
//    console.log("그려지고 나서 실행!");
//
//    return () => {
//      console.log("사라질 때 실행!");
//    };
//  }, []);
  
  const counterUp = () => {
    console.log(count);
    setCount(1);
  };

  const onClickMove = () => {
    router.push("/");
  };

  return (
    <>
      <div>{count}</div>
      <button onClick={counterUp}>카운트 올리기!</button>
      <button onClick={onClickMove}>나가기!</button>
    </>
  );
}