useEffect의 cleanup이 호출되는 두 가지 상황

정리 함수(cleanup function)는 useEffect 함수 내에서 반환되는 함수입니다. 컴포넌트가 언마운트될 때 정리 함수가 실행된다는 건 대부분 알고 계실겁니다.

그러나, 사실 정리 함수는 두 가지 상황에서 발생한다는 걸 알고 계셨나요? 저자에 의하면, 수백개의 워크샵을 진행했지만 정리 함수가 언제 실행되는 지 정확하게 대답한 사람은 단 한 명 밖에 없었다고 합니다.

정리 함수는 종속성 배열이 변경되어 효과를 다시 실행해야 할 때에도 호출됩니다. 즉, 의존성 배열이 변경되어 useEffect() 함수를 다시 실행하려고 할 때 호출됩니다. React는 새 이펙트를 실행하기 직전에 이전 이펙트의 정리 함수를 실행합니다.

이는 React 공식 문서의 useEffect 섹션에도 언급되어있습니다. (링크: https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount)

> The cleanup function runs not only during unmount, but before every re-render with changed dependencies.

자세한 내용은 아래 글을 읽어주세요.

https://reacttraining.com/blog/useEffect-cleanup