Cleanup function

많이 쓰이는 것은 아니지만,, 구래도 알아둬라!

컴포넌트가 파괴될 때도 code를 실행하기 !!

함수 2개 만들고 hi 함수에 return 작성하기. 근데 보통은 이렇게 안쓰고 useEffect 안에 다 쓴다.

import { useState, useEffect } from "react";
function Hello() {
  function byFn() {
    console.log("destroyed");
  }

  function hiFn() {
    console.log("created");
    return destroyedFn;
  }
  useEffect(effectFn, []);
  return <h1>Hello</h1>;
}
function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div className="App">
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "hide" : "show"}</button>
    </div>
  );
}

export default App;

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("created :)");
   return () =>  console.log("destroy :(");
  }, []);
  return <h1>Hello</h1>;
}
//destroy될 때도 결과를 보내고 싶을 수가 있잖아?
//그때 return을 쓴다 !! 조금 이상하게 보이긴 해도, 분석 API를 보낼때난 component가 사라지고나 eventlistener를 지우거나 등등 다양하게 활용 가능하긴 하지
//복잡하게 보이긴 하지만 쪼개서 생각해보면 그렇게 어렵진 않아. useEffect는 function이니까..return할 수 있는거지 ㅎㅎ..
//component가 파괴될 때도 function을 활용하고 싶으면 return 해야한다.

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;

cleanup은 자주 사용하게 되는 것은 아니지만,
알아두면 요긴하긴하다.

조금 다른 방식으로 reactJS프로젝트에서 사용하는 식으로 써보자. 두갤 비교해보자

import { useState, useEffect } from "react";

function Hello() {
  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye:(");
  }, []);
  ///비교 /////
  useEffect(() => {
    console.log("hi :)");
    return function () {
      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;