[React] Clean up Effect

👉🏼 Clean up Effect

::Render -> Effect Callback -> Clean up!
Effect이후 일어나는 Cleanup Effect를 보면, Cleanup Effect는 간단히 설명하면 이전에 일으킨 Side Effect를 정리할 필요가 있을 때 사용한다.

useEffect(() => {
	function handleScroll() {
		console.log(window.scrollY)
	}
	document.addEventListener("scroll", handleScroll)
}, [])

위 코드는 페이지에 스크롤 이벤트가 일어날 때마다 console에 현재 스크롤이 위치한 y좌표를 출력한다.
Side Effect이므로 useEffect 안에서 사용하고, 이벤트 리스너는 한 번만 등록하면 되기 때문에 의존성 배열에는 빈 배열을 넣어준다.

만약 우리가 이 페이지를 벗어났을 때 이 이벤트 리스너는 더 이상 필요가 없어질 수 있기 때문에 우리가 일으켰던 Effect를 정리해줘야 한다. 이 때마다 Cleanup Effect를 일으킬 수 있도록 useEffect 안에 해당 로직을 정리하는 동작을 정의해두면 된다.

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

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

위의 코드 중에 리턴부분이 그에 해당한다.
주의할 점은 단순 컴포넌트가 생성되고 사라지는 시점에만 Cleanup Effect가 실행되는 건 아니다. 다음 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;

위의 코드의 출력값은

render, 0
useEffect Callback, 0

// 클릭

render, 1
cleanUp, 0
useEffect Callback, 1