React Cleanup

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("created"); // 생성될 때 호출
    return () => console.log("destroyed"); // effect가 없어질 때 호출
  }, []);
  return <h1>Hello</h1>;
}

function App() {
  const [text, setText] = useState(false);
  const onClick = () => {
    setText((current) => !current);
  };

  return (
    <div>
      {!text ? <Hello /> : null}
      <button onClick={onClick}>{!text ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

 

페이지가 시작될 때 created 를 호출하고

 

hello 함수가 없어질 때 destroyed를 호출한다.

 

이 때 useEffect ( ( ) =>{

원하는 내용

return ( ) => 없어질 때 내용 호출

} ,[ ] )

 

effect 안에 return 을 사용하는 것을 cleanup 이라고 한다.

 

 

 

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React