[React] Cleanup function

학습일 : 2023. 03. 17

---

앞서 학습했듯

useEffect는 컴포넌트가 최초로 만들어질 때

아래 처럼 마지막에 빈 배열을 줬을 경우

 useEffect(iRunOnlyOnce, []);

 

처음 한번만 실행되고 끝이나는게 정상인데

 

그게 아니게 되는 경우가 있다.

 

바로 Cleanup function을 사용했을 경우 그렇게 되는데

Cleanup function 을 간단하게 설명하면

 

컴포넌트가 사라지게 될 경우

뭔가를 표시하거나, 뭔가를 할 수 있게 해주는 기능이다.

 

나는 컴포넌트가 사라지게 될 경우

콘솔에 "컴포넌트가 사라졌어요!" 라고 표시하고

 

컴포넌트가 다시 생겼을 경우

콘솔에 "컴포넌트가 만들어졌어요!" 라고 표시하고 싶다.

 

 

 

사용하는 방법은 아래와 같다

function Hello() {
  useEffect(() =>{
    console.log("컴포넌트가 만들어졌어요!");
    return () => console.log("컴포넌트가 사라졌어요."); // cleanup function - 컴포넌트가 destroy될 때 뭔가 할 수 있도록 해줌.
  }, []);
  return <h1>안녕?</h1>;
}

 

useEffect() 안에

return () => console.log("...");

을 작성해주면 된다.

 

 

 

전체 코드

import { useState, useEffect } from "react";

// useEffect는 컴포넌트가 처음 생성될 때 실행된다
// 이것으로 인해 컴포넌트가 언제 생성되었는지, 언제 사라졌는지 알 수 있게 됨.
function Hello() {
  useEffect(() =>{
    console.log("컴포넌트가 만들어졌어요!");
    return () => console.log("컴포넌트가 사라졌어요."); // cleanup function - 컴포넌트가 destroy될 때 뭔가 할 수 있도록 해줌.
  }, []);
  return <h1>안녕?</h1>;
}

function App() {
  const [showing, setShowing] = useState(false); // default 값은 false
  const onClick = () => setShowing((prev) => !prev); // 클릭시 반댓값을 리턴

  return (
    <div>
      {/* js를 쓸때는 중괄호! */}
      {/* showing이 참일 때 <Hello />를 반환, 아닐 때는 null */}
      {showing ? <Hello /> : null}
      {/* 버튼 - showing이 참일때 Hide, 아닐때 Show 로 텍스트가 변환 */}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

조금 다르게 써본 코드

import { useState, useEffect } from "react";

// useEffect는 컴포넌트가 처음 생성될 때 실행된다
// 이것으로 인해 컴포넌트가 언제 생성되었는지, 언제 사라졌는지 알 수 있게 됨.
// 컴포넌트가 파괴될 대는 react.js가 hiFn이 리턴한 function 을 실행하게 된다.
function Hello() {

  function byFn(){
    console.log("컴포넌트가 사라졌어요");
  }


  function hiFn() {
    console.log("컴포넌트가 만들어졌어요!");
    return byFn; // cleanup function
  }

  useEffect(hiFn, []);

  return <h1>안녕?</h1>;

}

function App() {
  const [showing, setShowing] = useState(false); // default 값은 false
  const onClick = () => setShowing((prev) => !prev); // 클릭시 반댓값을 리턴

  return (
    <div>
      {/* js를 쓸때는 중괄호! */}
      {/* showing이 참일 때 <Hello />를 반환, 아닐 때는 null */}
      {showing ? <Hello /> : null}
      {/* 버튼 - showing이 참일때 Hide, 아닐때 Show 로 텍스트가 변환 */}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

 

 

실행결과

 

 

 

useEffect를 작성해주었는데도 불구하고

console에 계속 문구가 찍혀 나오는 이유는

 

처음에 컴포넌트가 사라져 있었다가

클릭시 컴포넌트가 (최초로) 다시 생성되는 격이기 때문에

콘솔에 찍혀나오게 되는 것이다.

 

Cleanup function은

컴포넌트가 사라지게 될 때 어떠한 분석결과를 얻고 싶을 때

사용할 수 있을 것이다.

(예를 들자면 언제 컴포넌트가 사라졌는지/생성되었는지)