#6.4 정리

• 컴포넌트는 jsx를 호출하는 함수일 뿐입니다.
• 구성 요소를 표시할 때 함수가 트리거됩니다.
• 구성 요소가 제거되었을 때 무언가를 할 수 있게 해주는 기능 = cleanup 기능
• 구성 요소가 소멸된 경우에도 함수를 실행하려면 hiFn이 byFn을 반환해야 합니다.

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할 때 함수가 작동됨