Cleanup

1. 간단한 버튼 만들기

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("i m here");
  });
  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;

 

 

2. Cleanup 함수 만들기

컴포넌트가 destroy될 때 뭔가 할 수 있도록 해 주는 함수 

CleanUp 함수로 컴포넌트가 언제 create되었는지 언제 destroy 됐는지 알 수 있다.

function Hello() {
  useEffect(() => {
    console.log("created :)");
    return () => console.log("destoryed :(");
  });
  return <h1>Hello</h1>;
}

 

위의 함수를 풀어쓰게 되면 이렇게 된다.

function Hello() {
  function byFn() {
    console.log("bye :(");
  }
  function hiFn() {
    console.log("hi :)");
    return byFn;
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

혹은

  useEffect(function () {
    console.log("hi :)");
    return function () {
      console.log("bye :(");
    };
  }, []);