[ReactJS] useEffect() 의 활용

많이 사용하는 기술이라고 하지는 않는다.

다만 쓰지 않는 기술은 아니니 간단하게만 보고 넘어가도록 하자.

아래 코드의 useEffect() 두 개는 같은 동작을 실행하는 코드이다.

import { useState, useEffect } from "react";

function Hello() {

  // useEffect runs function
  // and reapeat it every time the dependencies(inside []) changes
  useEffect(() => {
    console.log("Hi :)");
    return () => {
      console.log("bye :(");
    }
  }, [])
  
  // same meaning another ver.
  // useEffect runs function
  // and reapeat it every time the dependencies(inside []) changes
  // useEffect(function () {
  //   console.log("Hi :)");
  //   return function () {
  //     console.log("bye :(");
  //   }
  // }, []);

  return <h1>Hello</h1>
}

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

export default App;

이전과 달라진점은 useEffect(함수, [dependencies])에서 '함수' 영역에 return문이 생겼다는 것인데,

이것은 원래 '함수'가 꺼질 때 일어나는 다른 함수를 지칭한다.

즉, 나 자신이 사라질 때 남기고 갈 함수를 의미한다.