[React] Hooks - useEffect

useEffect

useEffect란 component가 렌더링 될때 마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  },[update 인자!]);

  return <div>Home</div>;
}

export default App;

useEffect에 있는 의존성 배열안의 값의 변화가 있을 경우에만 useEffect가 실행된다.

[] 안에 인자가 없다면 첫 렌더링 때만 실행되고 실행되지 않음!

이것을 LifeCycle에 접목시켜
component가 렌더링 되었을 때, update 될 때, unMount 될 때의
함수를 사용하여 그 순간에 함수가 실행될 수 있도록 사용할 수 있다.

클린업

useEffect 의 return 값을 말한다.
화면이 사라지는 순간! 마지막으로 정리한다는 뜻.
사용하지 않을 component 의 함수를 사용하지 않게 지워 준다.