[노마드/React로 영화 웹 서비스 만들기] Ch06 EFFECTS | 4. Cleanup

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  clean up 함수

---

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>
  );
}

👉🏻전체 코드는 다음과 같다.

📌component가 파괴될 때 실행하는 함수가 clean up 함수이다.

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>
  );
}

👉🏻App component에 showing boolean 값을 가지는 state를 만들어준다. showing이 true일 때 Hello component를 생성하고 false일 때  파괴한다.

function Hello() {
  useEffect(() => {
    console.log("hi!");
    return () => console.log("bye!"); //파괴되었을 때 hiFn이 return한 byeFn이 실행된다.
  }, []);
  return (
    <h1>Hello</h1>
  )
}

👉🏻Hello component에서는 useEffect를 사용해 Hello component가 render될 때마다 hi를 console에 출력한다.

👉🏻그리고 Hello component가 파괴될 때 useEffect에서 return한 console.log를 실행한다.

showing이 true, create component

showing이 false, destroy component