어렵다.. 너무..

• 컴포넌트가 마운트 해제될 때?
  컴포넌트가 DOM에서 제거되는 시점, 컴포넌트가 더 이상 필요하지 않아서 화면에서 제거될 때. 다른 페이지로 이동할 때. useEffect Hook에서 클린업(clean-up) 함수를 반환할 때?.

useEffect에 대한 내용을 공부하면서 상당히 어려움을 겪고 있는 부분이다. return 키워드로 클린업(clean-up) 함수를 만들 수 있는데, 이건 컴포넌트가 마운트 해제될 때 동작하게 된다. 그런데 내 코드에서 컴포넌트가 마운트 해제되는 과정을 도통 이해하지 못하고 있다. useInterval 함수 내부의 클린업(clean-up) 함수는 잘 동작하고 있다. 그런데 나는 페이지를 이동하지도 않았고 컴포넌트가 화면에서 제거되지도 않았다. 그렇다면 도대체 클린업(clean-up) 함수가 어떻게 동작하게 된다는 말인가?

슬라이드쇼의 자동이동 기능을 구현한 다음에 이 함수의 동작 원리를 분석했는데, 도통 해결되지 않은 하나의 궁금증때문에 한동안 머리를 싸매고있었다.

구글링으로 찾는 자료를 봐도 내 의문을 해결해줄 정답이 보이지도 않고.. 결국 내 질문에 바로바로 대답이 가능한 상대를 찾아 질문을 계속 던져보았다.

1. 계속 물어보기..

질문을 계속하고 답변을 계속 받고, 원하는 답은 나오질 않고 머리가 아프다.. 코드를 다시 보고 답변을 다시 보고.. 그러다가 무언가 해답이 순간적으로 머리에서 번쩍였다!

2. 착각.

나는 처음부터 완전히 잘못된 생각을 하고 있었다. 나는 슬라이드쇼의 자동이동 기능이 동작하는 순간마다 매번 setInterval이 실행되고, 바로 clearInterval이 실행된 다음에 다시 setInterval이 실행된다고 착각하고 있었던 것이었다.

이렇게 되면 클린업(clean-up) 함수가 계속 동작한다는 뜻이고, 컴포넌트가 마운트 해제되고 있다는 뜻인데 아무리 살펴봐도 내 컴포넌트는 마운트가 해제되고 있지 않았다. Chat GPT도 계속 동일한 답변을 하고 있어서 미쳐버릴 지경이었는데, 애초에 마운트는 해제되지도 않았고, 클린업 함수도 동작하지 않았다. 근본부터 생각을 잘못하고 있었으니 Chat GPT의 대답을 보고도 이해를 못한게 당연한 일, 내가 바보였다..

실제로 기능이 동작하는 과정은 아래와 같았다.

슬라이스쇼 컴포넌트가 렌더링되면 (마운트 되면) setInterval 함수에 의해서 슬라이드의 자동이동 기능이 잘 동작한다. 그러다가 다른 페이지로 이동하거나 슬라이스쇼 컴포넌트가 화면에서 사라졌을 때는 (마운트가 해제되면) useEffect Hook에 클린업(clean-up) 함수로 등록해 둔 clearInterval 기능이 동작하여 쓰임새를 다한 setInterval을 메모리에서 제거한다.

그러니까 나는 아무 일 없이 잘 마운트되어 기능을 동작하고 있는 상황에서 클린업(clean-up) 함수가 계속 호출된다고 착각했고, 이로 인해서 컴포넌트가 마운트 해제되고 있다고 착각했고, 그래서 Chat GPT에게 내 컴포넌트가 어디서 어떻게 마운트 해제되고 있냐는 어이없는 소리를 하고 있었던 것이다. 착각이 또다른 착각과 이어지면서 완전한 헛소리를 하고 있으니 질문도 이상하고 답변도 이해를 못하고 있었다..

3. 클린업(clean-up) 함수.

• 익명함수를 return한다?
  useEffect Hook 내부에서 사용되는 return 키워드에 함수를 사용할 경우, 클린업(clean-up) 함수로 간주된다. 이 함수는 컴포넌트가 unmount 될 때와 디펜던시에 포함된 값이 변화할 때 호출된다.

클린업 함수는 주로 다음과 같은 경우에 사용한다고 한다.

타이머, 인터벌, 또는 디바운스와 같은 주기적인 작업을 해제.
이벤트 리스너 등록 해제.
기타 메모리 누수를 방지하기 위해 수행해야 하는 정리 작업.

• 클린업 함수가 호출되는 시점은?
  컴포넌트의 의존성(dependency) 배열에 포함된 값이 변경될 때, 컴포넌트가 언마운트(unmount)될 때.