이전 포스팅 중에 State Lifecycle 에 관해 포스팅 한적이있다.
https://velog.io/@rlatjsdn147/state-Life-cycle (참고)

위 포스팅에서는 클래스형 컴포넌트에서 state-lifecycle애관해 포스팅했다면, 이번엔 함수형 컴포넌트에서 똑같은 용도로 사용하는 Hook 을 소개 하고자 한다.

UseEffect

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

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

  // []: 의존성배열
  useEffect(() => {
    console.log("마운트됨!!!");
    // 포커스 깜빡깜빡
    return () => {
      console.log("컴포넌트 사라짐!!!");
    };
  }, []);
  // []: componentDidMount, + componentWillUnmount

  useEffect(() => {
    console.log("수정되고 다시그려짐!!!");
  });
  // componentDidUpdate

  // useEffectd의 잘못된 사용예제
  useEffect(() => {
    setState((prev) => prev + 1);
    // 1. componentDIdMount는 랜더링이 되자마자 무조건 실행되기 떄문에 state와 함꼐 쓰면 랜더링이 두번되므로 좋은 경우가 아님.(state도 바뀌면 다시 렌더링 되기때문)
    // 2. 무한렌더링
  }, [count]);

  const onClickCounter = () => {
    setCount((prev) => prev + 1);
  };

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

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

주석으로 자세한 설명이 있으니 참고하길바란다. 이거보다 간단한 예를 하나 들자면

import { useState, useEffect} from 'react'

export default function UseEffectFunction() {
const [color, setColor] = useState()

const ChangeColor = (color) -> {
  		setColor(color)
	}
    
    useEffect(() => {
      console.log('Component is loaded')
    }, [])
      
    useEffect(() => {
      	console.log('Component is Changed')}, [color])
return(
  <div>
  	<div style = {{
        width: '200px',
        height: '100px',
        backgroundColor: color,  
      }}>
  </div>
    
    <div>
    	<button onClick(() => changeColor('red'))>Red</button>
        <button onClick(() => changeColor('black'))>Black</button>
        <button onClick(() => changeColor('green'))>Green</button>
        <button onClick(() => changeColor('pink'))>Pink</button>
    </div>
)
}

위의 코드는 처음 컴포넌트가 랜더링이 되면 위쪽에 있는 useEffect가 실행되서 'Component is loaded' 라는 문장이 콘솔창에 뜨고, 화면에 보여지는 <div> 태그의 색깔이 onChangeColor 라는 함수에 의해 바뀔 때 마다 아래 쪽 useEffect에 의해 ('Color is Changed') 라는 문장이 콘솔창에 뜨게된다. 두번 째 useEffecct에있는 [color] 라는 배열은 '의존성배열' 이라고 하는데, 위의 코드를 전제로 말하면, color라는 state값에 변화가 있을 때 마다 useEffect를 실행 시키라는 뜻이다.