[React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행

[React, Next.js] useEffect라는 Hook을 사용해서 컴포넌트가 사라질 때 제어코드

 

React 구성 요소가 사라질 때, 일부 코드를 실행해야 할때 사용하는 코드

function HookComponent() {
  useEffect(() => {
    return () => {
    	// 컴포넌트가 사라질 때 실행되는 코드
    }
  }, []);

  return (
    <div>컴포넌트 HTML 구성부</div>
  );
}

위 코드는 컴포넌트가 사라질 때(컴포넌트가 언마운트 될 때) L4주석부분의 코드가 실행된다.