Mount & UnMount

▶️ Mount

마운트는 컴포넌트의 인스턴스가 생성되어 DOM에 삽입되는 과정으로 컴포넌트가 화면에 나타나는 것이다.

컴포넌트가 마운트 될 때 일어나는 일:

1. 컴포넌트 함수가 호출 (함수형 컴포넌트의 경우)
2. JSX가 React 엘리먼트로 변환
3. 가상 DOM이 업데이트
4. 실제 DOM에 변경사항이 반영
5. 컴포넌트의 useEffect 훅의 코드가 실행 (의존성 배열이 비어있거나, 지정된 의존성에 따라)

▶️ Unmount

언마운트는 컴포넌트가 DOM에서 제거되는 과정으로 컴포넌트가 화면에서 사라지는 것이다.

컴포넌트가 언마운트 될 때 일어나는 일:

1. 컴포넌트가 DOM에서 제거
2. useEffect 훅의 cleanup 함수(반환된 함수)가 실행
3. 컴포넌트와 관련된 메모리가 정리

💡 마운트와 언마운트가 발생하는 상황

컴포넌트가 마운트되는 상황:

• 애플리케이션이 처음 로드될 때 초기 렌더링되는 컴포넌트들
• 조건부 렌더링에서 조건이 true로 변할 때 (예: {isLoggedIn && <ProfilePage />})
• 리스트 렌더링에서 아이템이 추가될 때
• 라우팅에서 새 페이지로 이동할 때의 새 컴포넌트

컴포넌트가 언마운트되는 상황:

• 조건부 렌더링에서 조건이 false로 변할 때
• 리스트 렌더링에서 아이템이 제거될 때
• 라우팅에서 다른 페이지로 이동할 때의 이전 컴포넌트
• 애플리케이션이 종료될 때

🤔 왜 마운트/언마운트 상태를 추적하는 것이 중요한가?

언마운트된 컴포넌트의 상태를 업데이트하려 하면 다음과 같은 경고가 발생할 수 있다.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

이러한 문제를 방지하기 위해 UseLoading 훅은 컴포넌트가 언마운트되었는지 확인하고, 언마운트된 경우에는 상태 업데이트를 시도하지 않는다.

🧐 SPA에서 마운트/언마운트 관리가 중요한 이유

• 메모리 누수 방지
  • SPA는 페이지가 새로고침되지 않고 장시간 실행되므로, 메모리 누수가 누적되면 성능이 저하될 수 있다.
  • 언마운트된 컴포넌트에 대한 참조가 계속 유지되면 가비지 컬렉션이 제대로 작동하지 않아 메모리 누수가 발생한다.
• 불필요한 상태 업데이트 방지
  • 언마운트된 컴포넌트는 더 이상 화면에 표시되지 않으므로, 이 컴포넌트의 상태를 업데이트하는 것은 리소스 낭비이다.
• React의 경고 해결
  • React는 언마운트된 컴포넌트에 상태를 업데이트하려고 할 때 다음과 같은 경고를 표시해주는데

    
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
    

  • 이 경고는 메모리 누수의 가능성을 나타내며, 애플리케이션의 안정성에 영향을 줄 수 있다.
• 이벤트 리스너 및 타이머 정리
  • 컴포넌트가 언마운트될 때 등록된 이벤트 리스너, 타이머, 구독 등을 정리(cleanup)하지 않으면 메모리 누수가 발생할 수 있다.

[참고자료]

https://medium.com/@ralph1786/intro-to-react-component-lifecycle-ac52bf6340c