본문 바로가기

리액트 기기기초

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

'리액트 기기기초' 카테고리의 다른 글

#7.1 To Do List part Two  (0) 2023.03.11
#7.0 To Do List part One  (0) 2023.03.10
#6.3 Recap  (0) 2023.03.10
#6.2 Deps  (0) 2023.03.10
#6.1 useEffect  (0) 2023.03.10