#6.4 Cleanup

• component는 단지 jsx를 부르는 function임
• 우리가 component를 show할 때 함수가 작동됨 
• 컴포넌트가 제거될때 뭔가 할 수 있도록 해주는 애 = cleanup function
• 컴포넌트가 파괴될 때도 function을 실행하고 싶으면 hiFn이 byFn을 return해야함

function byeFn(){
    console.log("bye :(");
  }
  function hiFn() {
    console.log("created :)");
    return byeFn; //컴포넌트가 파괴될 때 실행 
  }
  useEffect(hiFn,[]);

import { useEffect, useState } from "react";

function Hello() {
  useEffect(()=> {
    console.log("hi :)");
    return () => console.log("bye :(")
  }, []);
  useEffect(function () {
    console.log("hi :)");
    return function(){
      console.log("bye :(")
    };
  }, []);
  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;

useEffect(() => {
    console.log("created :)"); //component가 처음 생성될 때만 실행됨
    return () => {console.log("destroyed :(")} //component가 제거될 때 실행됨
  }, []); //우리가 component를 show할 때 함수가 작동됨