Clean up Effect

1. Cleanup 함수

페이지를 벗어났을 때 이벤트 리스너는 더 이상 필요없어질 수 있습니다. 이러할 경우엔 Effect를 정리해줘야 합니다. 이 때마다 Cleanup Effect를 일으킬 수 있도록 useEffect 안에 해당 로직을 정리하는 동작을 정의해두면 됩니다.

Cleanup 함수란, useEffect()에서의 return 함수입니다.

🙋‍♀️ 원래 함수에 return이 있는 거 아닌가요? return 함수 그게 뭐죠?

첫번째 예시를 보면,

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

useEffect 함수 안에 return 함수가 있는 걸 볼 수 있습니다. 이런 식으로 useEffect 함수 안에 return함수를 추가하여 cleanup 함수를 사용할 수 있습니다.

return () => {}; //cleanup 함수는 이렇게 쓸 수 있습니다. 

사용자가 현재 페이지에서 다른 페이지로 넘어갔을 때 useEffect가 실행되지 않도록 합니다.

🙋‍♂️useEffect함수와 Clean up 함수의 동작 원리를 알고 싶어요.

두번째 예시를 보면,

useEffect(() => {
	console.log("effect");
    
    return () => {
    	console.log("cleanup effect");
    };
});

1. 처음에 페이지가 렌더링될 때 (mount될 때)

console에는 useeffect 함수의 console만 찍히게 됩니다.

2. state 값을 변경했을 때 (예를 들어 버튼 클릭)

console에는 cleanup 함수의 console이 먼저 찍히고 useEffect 함수의 console이 찍히게 됩니다.

useEffect를 실행하기 전에 cleanup함수를 실행시키고 그 다음에 useEffect함수를 실행시킵니다.

state를 변경하면,
cleanup함수 -> useEffect함수 실행 이 cycle로 동작합니다.

3. 다른 페이지로 넘어가서 unmount될 때

cleanup 함수가 한 번 실행되고 기존의 이펙트 함수는 실행되지 않습니다.

** 주의할 점
단순히 컴포넌트가 생성되고, 사라지는 시점에만 Cleanup Effect가 실행되는 건 아니라는 겁니다. 다음 Effect가 일어나기 전에, 이전 Effect의 영향을 정리해줘야 한다는 컨셉을 꼭 기억해주세요.🤩