6.4 Cleanup

오늘은 Cleanup 함수를 배워보자.

 

 

아래와 같이 코드를

import { useEffect, useState } from "react";

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

show, hide 버튼이 클릭시, 계속 바뀌도록 구성하였다.

그리고 다음과 같이 Hello 컴포넌트를 만들어서

import { useEffect, useState } from "react";

function Hello() {
  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;

다음과 같이 출력되도록 자바스크립트 함수 ({ } 안에 들어간 것들)로 조건을 주었다.

 

그럼 Hello component에 useEffect를 입혀보자.

그러면 다음고 같이 Hello가 나올때, console로 출력되는 것을 확인할 수 있다.

 

 

그런데 다음과 같이 return함수를 받으면

Hide버튼을 클릭했을때에는(Hello가 나올때)에는 created가 나오는데

Show버튼을 클릭했을때에는 destroyed가 되었다!!

근데 나한테는 아래와 같이 그런다.. 왜그렇지....

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("created :)");
    return () => console.log("destroyed :(");
  }, []);
  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 버튼 한번 클릭했을 때

 두번 클릭했을 때

세번째 클릭했을 때

 

이것이 Cleanup 함수 이다!!

 

이것이 component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.

ex) component가 없어질 때 어떤 분석결과를 보내고 싶어 할때 분석 API를 보낼 수 있음

ex) component가 없어질 때 event listener를 지우거나, console에 뭔가 보여줄 수 있음

 

그래서 component가 언제 create되었는지, destroy되었는지 알 수 있다는 것이다!

 

Hello component를 아래와 같이 구성하게 된다면, created되었을때 출력하게 된다

 

 

근데 아래와 같이 구현하게 된다면

hiFn이 byeFn을 return해주어야한다.

그럼 다음과 같이 출력한다.

 

보통으로는 byeFn는 주로 필요로 하지 않는다.

가끔 필요할때가 있긴 하지만...

 

그럼 아까처럼 다시한번 돌아가볼까

보통은 위와 같은 함수들을 만들지 않고, useEffect안에 모든것을 작성하기 때문에!!

 

아래의 두 모드 중 선택해서 사용하면 되는데

딱 코드 길이만 봐도 전자가 좋아보이니! 전자를 추천하기는한다! (사람들도 대부분 후자를 사용하지 않아!)

 

그럼 전자를 사용하자.

 

 

이제 개념 공부는 끝!!!!

다음부터는 프로젝트를 진행해보자!!

 

전체 코드

import { func } from "prop-types";
import { useEffect, useState } 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;