Antigravity Agent
3.6 KiB
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