⚛️React Training - section05 : useEffect - CleanUp function

이번  포스팅에서는 useEffect에서 사용되는 cleanup 함수를 배워 볼 것이다. cleanup 함수는 주로 useEffect 훅에서 사용되는 함수이다. 해당 useEffect가 더 이상 필요하지 않을 때 어떻게 정리할 것인지를 정의하는 역할을 한다. useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 효과를 발생시키는 데 사용된다. 이때, 해당 효과가 필요하지 않아지면 그에 대한 정리 작업을 수행하기 위해 cleanup 함수가 활용된다. cleanup 함수는 useEffect 안에서 반환되는 함수로 컴포넌트의 렌더링이 사라질 때 또는 특정 조건이 변할 때 실행된다. 코드를 우선 살펴보자.

import { useState, useEffect } from "react";

function Hello() {

  useEffect(() => {

    console.log("created :)");

    return () => {

      console.log("bye :(");

    }

  }, []);

  return <h1>Hello</h1>;

}

export default function SubApp() {

  const [showing, setShowing] = useState(false);

  const onClick = () => setShowing((prev) => !prev);

  return (

    <>

      {showing ? <Hello /> : null}

      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>

    </>

  )

}

위의 hello 내부 컴포먼트를 살펴보면 hello컴포넌트가 실행이 되면 useEffect함수가 실행되면서 'created :)' 문구가 log로 띄워 진다. 이후 실행이 끝나고 나면 'bye :(' 라는 문구가 뜨게 되는 것이다. 즉, useEffect는 컴포넌트가 불리게 되면 한번 실행된다. 따라서 'created :)'문구가 한번 실행이되고 useEffect는 hello컴포넌트의 life Cycle이 종료가 될 때까지  함께 존재하다가 life Cycle이 끝남과 동시에 useEffect의 'bye :(' 문구가 반환되는 것이다. 이를 함수로 좀 더 변환해서 보면 아래와 같다.

import { useState, useEffect } from "react";

function Hello() {

  function byFn() {

    console.log("bye :(");

  }

  function hiFn() {

    console.log("created :)");

    return byFn();

  }

  useEffect(hiFn, []);

  return <h1>Hello</h1>;

}

export default function SubApp() {

  const [showing, setShowing] = useState(false);

  const onClick = () => setShowing((prev) => !prev);

  return (

    <>

      {showing ? <Hello /> : null}

      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>

    </>

  )

}

함수로 변환된 것이 조금은 복잡해 보일 수 있다. 아직 익숙하지 않아서다. 이해가 어렵다면 첫 번째 코드를 눈에 익히면 다음 코드도 수월하게 이해가 될 것이다. 이렇게 오늘의 포스팅을 마친다.