React Cleanup

Cleanup에 대해서 알아보기!

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("created");
  }, []);
  return <h1>Hello?</h1>;
}

function App() {
  const [onandoff, setOnandoff] = useState(false);
  const onClick = () => setOnandoff((pre) => !pre);
  return (
    <div>
      {onandoff ? <Hello /> : null}
      <button onClick={onClick}>{onandoff ? "hide" : "show"}</button>
    </div>
  );
}

export default App;

다짜고짜 코드쓴건 앞전에 다 익힌 내용이라서. 충분히 코드만 봐도 브라우저에 어떤게 생성되었는지 머리속에 그려짐. 버튼을 눌렀을때 <h1></h1>에 들어가 내용이 나왔다 사라졌다 할껀데, 그때마다 useEffect를 써서 컴포넌트가 호출될때 콘솔까지 찍어봤음. 여기서 퀴~~~즈! <h1>Hello?</h1> 에 disabled = true or false 를 주었을까? 안주었을까? 윗 코드 보면 알겠지만. 없어. 안줬음. 그면 버튼을 눌렀을때 <h1>Hello?</h1> 요 코드가 destroy된거임. 오홍 개발자도구 켜서 보면

없던 <h1>Hello?</h1> 요놈이 생긴걸 알 수 있음.

[새로운내용]
react.jss는 create했을때 실행시키는 기능도 들고있지만, destroy될때도 실행해 주는 기능이 있음. destroy할 땐 useEffect에 return값으로 넣어주면댐.

function Hello() {
  useEffect(() => {
    console.log("created :)");
    return () => {
      console.log("destroyed :("); // 이걸 우린 cleanup function이라고 부름!
    };
  }, []);
  return <h1>Hello?</h1>;
}

요로케~!

아주 귀엽구만 ^^.

참고로 윗 useEffect코드를 풀어쓰면.. 아래 코드와 같음.

function destroyFn(){
  console.log("destroyed :(");
}
function createFn (){
  console.log("created :)";
  return destroyFn;
}
useEffect(createFn, []);

글고 cleanup기능은 잘 안만듬. 특별한 케이스일때만 만듬