2nd/00_Raw/Component Lifecycle.md

# [[Component Lifecycle]]

## 📌 Brief Summary
컴포넌트 라이프사이클(Component Lifecycle)은 컴포넌트가 렌더링되고, 업데이트되며, 마운트 해제(unmount)되는 일련의 과정을 의미합니다. 최신 함수형 React에서는 `useEffect`와 같은 훅(Hook)을 사용하여 라이프사이클에 따른 부수 효과(side effects)를 관리하며, 클래스형 컴포넌트에서는 `componentDidCatch`와 같은 특정 라이프사이클 메서드를 활용합니다 [1, 2]. 특히 컴포넌트가 마운트 해제될 때 적절한 정리(cleanup) 작업을 수행하는 것은 메모리 누수를 방지하고 애플리케이션의 안정성을 유지하는 데 필수적입니다 [3].

## 📖 Core Content
* **함수형 컴포넌트와 `useEffect` 훅 활용**
  최신 React의 함수형 컴포넌트에서는 주로 `useEffect`를 통해 라이프사이클과 관련된 부수 효과(side effects)를 처리합니다. 흔히 발생하는 문제 중 하나는 이벤트 리스너나 구독(subscription)과 같은 효과를 컴포넌트 마운트 해제 시 정리(cleanup)하지 않는 것입니다 [1]. 이러한 정리 누락은 시간이 지남에 따라 성능 저하와 메모리 누수(Memory Leak)를 유발할 수 있으므로, `useEffect`에서 항상 정리 함수를 반환하여 컴포넌트가 언마운트될 때 리소스가 해제되도록 해야 합니다 [1, 4].

* **클래스형 컴포넌트의 라이프사이클 메서드와 에러 경계(Error Boundaries)**
  클래스형 컴포넌트는 고유한 라이프사이클 메서드를 가집니다. `static getDerivedStateFromError()` 또는 `componentDidCatch()` 중 하나 이상을 정의하면 해당 클래스 컴포넌트는 하위 트리의 에러를 포착하는 '에러 경계(Error Boundary)' 역할을 수행하게 됩니다 [2]. 에러 경계는 하위 컴포넌트 트리의 렌더링 중, 생성자 내부, 그리고 라이프사이클 메서드 내부에서 발생하는 에러를 포착합니다 [5]. 하위 컴포넌트의 `componentDidUpdate`와 같은 라이프사이클 메서드 안에서 에러가 발생하더라도, 이는 가장 가까운 에러 경계로 정상적으로 전파되어 애플리케이션 전체가 멈추는 것을 방지합니다 [6].

* **컴포넌트 언마운트 시 메모리 누수 예방**
  SPA(Single Page Application) 환경에서 컴포넌트 라이프사이클 주기를 이해하는 것은 메모리 누수 탐지 및 예방에 매우 중요합니다 [7]. 컴포넌트가 언마운트될 때 등록된 이벤트 리스너를 제거하지 않으면 참조가 계속 유지되어 가비지 컬렉션(Garbage Collection)이 이루어지지 않습니다 [3, 7]. 이를 방지하기 위해 React에서는 `useEffect`의 반환 함수에서 정리를 수행하고, Vue에서는 `beforeUnmount` 라이프사이클 단계에서 감시자(watchers)와 이벤트 리스너를 파괴하는 등 각 프레임워크의 라이프사이클에 맞춘 적절한 정리 패턴을 구현해야 합니다 [3].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Hooks]], [[useEffect]], [[Error Boundaries]], [[Memory Leaks]]
- **Projects/Contexts:** [[Single Page Applications (SPAs)]], [[Frontend Performance Optimization]]
- **Contradictions/Notes:** 제공된 소스에서는 라이프사이클의 모든 단계를 포괄적으로 설명하기보다는, 주로 함수형 컴포넌트의 마운트 해제 시 메모리 누수 방지(useEffect의 cleanup)와 클래스형 컴포넌트의 에러 핸들링(Error Boundaries) 맥락에서 라이프사이클의 특정 측면을 집중적으로 다루고 있습니다.

---
*Last updated: 2026-04-26*