React - useEffect 생명 주기 설정

useEffect는 본래 클래스 컴포넌트에서만 사용 가능했던 생명주기를 함수형 컴포넌트에서도 가능 하도록 만들어주는 React Hooks의 기능 중 하나 이다.

useEffect의 일반적 사용 방법

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log("Amount");
  }, []);

  return <div>Hello World</div>;
}

이렇게 하게 되면 컴포넌트가 최초로 렌더링 될때만 "Amount" 라는 글자를 출력하게 된다,

useEffect 생명주기 정하기

useEffect는 useEffect(callBackFunc, dependencies) 이러한 구조를 가지고 있는데 만약에 useEffect의 dependencies useEffect를 재실행 하기위해 생명주기를 설정 할 수 있다.
예를 들어서 버튼을 눌러 카운트 될때마다 useEffect를 실행시켜 보자

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

  useEffect(() => {
    console.log("Amount");
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>+ 1</button>
      <h1>Count: {count}</h1>
    </div>
  );
}

dependencies의 값이 바뀔때 마다 useEffect가 재실행된다.

이런식으로 useEffect의 생명 주기를 줌으로써 여러가지 응용이 가능하게 된다,