0607

공부내용 한줄 요약
'Cleanup 함수' component가 destroy될 때도 함수를 실행할 수 있다.

useEffect 안에서 함수를 return해두면 컴포넌트가 파괴될 때 실행시켜 준다.
** 컴포넌트는 jsx를 return하는 function일 뿐!

import { useState, useEffect } from "react";

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

Comment
흔히 사용하지 않으나 컴포넌트가 파괴될 때 리포트 전송을 원하는 경우 등에 사용한다.