[React JS] Cleanup function

이번엔 cleanup 기능에 대해서 알아보자.

우선 다음과 같은 코드를 준비한다.

import { useState, useEffect } from "react";

const Hello = () => {
  useEffect(() => {
    console.log("I'm here!");
  }, []);
  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;

이를 화면으로 출력한다면

show 버튼을 클릭 시 onClick function으로 console.log및 Hello component가 실행될 것이다. 

생성될 때마다 useEffect가 실행되는데, 삭제될 때도 useEffect가 실행되게 하는 방법을 알아볼 것이다.

 

const Hello = () => {
  useEffect(() => {
    console.log("Created :)");
    return () => console.log("destroyed :(");
  }, []);
  return <h1>Hello!</h1>;
};

기존 라인에 return구문을 추가했다. 보기엔 이상하지만 작동은 잘 된다.

이와 같은 함수를 cleanup function이라고 한다. 그냥 function이지만, 나의 component가 파괴될 때 뭔가 할 수 있게 만들어준다.

다른 방식의 코드로 작성해보면

const Hello = () => {
  const byeFn = () => {
    console.log("Bye :(");
  };
  const helloFn = () => {
    console.log("Created :)");
    return byeFn;
  };
  useEffect(helloFn, []);
  return <h1>Hello!</h1>;
};

역시 같은 결과 값을 얻을 수 있다.