[React] Effect Hook- Clean up 함수

노마드코더 ReactJS로 영화 웹 서비스 만들기 #Cleanup

import Button from "./Button";
import styles from "./App.module.css";
import { useState, useEffect } from "react";

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

 

Clean-up함수란, useEffect()에서의 return 함수이다.

useEffect의 함수는 dependency가 변화할 때 호출된다. 현재는 dependency가 비어있기 때문에 컴포넌트가 처음 렌더링될 때 한번 함수가 호출된다.

useEffect 함수가 return 하는 함수는 컴포넌트가 파괴될때 실행된다.

 

=> show 버튼을 클릭하면 Hello 컴포넌트가 렌더링돼 hi :) 가 콘솔에 찍히고

hide로 바뀐 버튼을 클릭하면 Hello 컴포넌트가 destory 되고 bye :( 가 찍힌다.