[이슈] useEffect에 dependency props이 있을때 cleanup 함수

기본적으로 useEffect의 clean-up함수는 컴포넌트가 unmount 될 때 실행된다.

따라서 컴포넌트가 unmount 될때의 이벤트를 clean up 함수에 걸어주는것이 일반적이다.

 

그러나 props가 비어있지 않다면 clean up 함수는 우리 기대와 다르게 동작한다.

 

다음과 같은 예시에서 해당 컴포넌트는 ratingId가 바뀔때 '마운트'라는 콘솔이 찍힐것이다. 

그러나 ratingId가 바뀔때마다 cleanup 함수인 '언마운트' 콘솔도 함께 찍힌다

 

그 이유는 실제 화면에서 테스트해보면 알 수 있다.

props가 바뀔때마다 hook이 새로 만들어지기때문에, 항상 이전 useEffect를 unmount하고 다시 새로운 useEffect를 mount하는 것이다.

실제로 ratingId라는 props를 바꾸면 언마운트-> 마운트의 순서로 콘솔이 찍히는데, 이는 이전 useEffect를 지우고 새로운 hook을 렌더링 하기 때문이다.

물론 아예 unmount될때도 clean up 함수는 실행 될 것이다.

 

그렇다면 오직 unmount 상황에서만 clean up함수를 실행하고 싶다면 어떻게 해야 할까?

이때는 무조건 deps가 빈 배열인 useEffect만 활용하여야 한다.