Clean up effect

Cleanup Effect는 이전에 일으킨 side effect를 정리할 때 사용된다.
페이지를 벗어났을 때 이벤트리스너와 같은 여러 effect가 더이상 필요 없어질 수 가 있다. 이럴 때마다 Cleanup Effect를 적용해주면 된다. Cleanup effect는 useEffect의 return문 안에 해당 effect의 로직을 정리하는 동작을 정의하는것으로 적용할 수 있다.

useEffect(() => {
  function handleScroll() {
    console.log(window.scrollY)
  }

  document.addEventListener("scroll", handleScroll)
  return () => {
    document.removeEventLisnter("scroll", handleScroll)
  }
}, [])

useEffect의 중요한 컨셉은 다음 effect가 일어나기전에 이전 effect의 영향을 정리해줘야 한다는것!

const App = () => {
  const [count, setCount] = useState(0);

  console.log("render", count);

  useEffect(() => {
    console.log("useEffect Callback", count);
    return () => {
      console.log("cleanUp", count);
    });
  }, [count]);

  return <div onClick={() => setCount(count + 1)}>하잉</div>;
};

export default Foo;

위의 console은 어떤 순서로 찍혔을까?

 render, 0
 useEffect Callback, 0
 
 // 클릭
 
 render, 1
 cleanUp, 0
 useEffect Callback, 1

결과는 다음과 같다.
먼저 당연히 코드는 위에서 아래로 실행되기 때문에 render가 먼저 찍히고 count의 초기값 0을 출력한다. 그 후 첫 렌더링인 Mount가 끝난다.
클릭을 해주는 순간 count의 state이 바뀌면서 re-rendering이 일어난다. setState 함수에 의해 1이 더해지고 render와 1이 출력된다.
그 후 cleanUp effect가 useEffect의 callback함수보다 먼저 실행이 되어 이전에 있던 side effect를 정리한다.
cleanUp effect가 실행되고 useEffect의 callback함수가 실행되어 useEffect callback과 현재의 state값인 1이 출력된다.