[React] Cleanup 함수

• 코드가 브라우저에 렌더링되는 과정에서 특정 컴포넌트가 사라지거나 파괴되는 순간을 시각화할 수 있는 함수가 있다. 바로 Cleanup function을 통해 가능하다.

return () => code입력

• 아래 코드 참고

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("created!");
    return () => console.log("destroyed!"); // component가 사라질 때 동작하는 cleanup 함수.
  }, []);
  return <h1>Hello</h1>
}
function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null} 
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;