# [[Class Components]]

## 📌 Brief Summary
클래스 컴포넌트(Class Components)는 JavaScript 클래스 문법을 사용하여 작성된 과거 React의 주요 컴포넌트 형태입니다. 오늘날의 React 개발 생태계는 대부분 함수형 컴포넌트로 전환되었으나, 특정 기능을 구현하기 위해 여전히 일부 사용됩니다. 가장 대표적으로 자식 컴포넌트 트리의 렌더링 에러를 포착하고 처리하는 '에러 바운더리(Error Boundaries)'는 오직 클래스 컴포넌트로만 구현할 수 있습니다 [1-4].

## 📖 Core Content
*   **함수형 컴포넌트로의 전환 및 리팩토링:** 
    현대의 프론트엔드 업계 표준은 클래스 기반 React에서 함수형 React로 전환되었습니다 [1]. 최신 React에서는 클래스 상속과 같은 객체 지향 프로그래밍(OOP) 방식이 거의 사용되지 않으며, 함수형 접근법이 선호됩니다 [5]. 이에 따라 레거시 React 코드베이스를 리팩토링할 때 가장 우선적으로 고려되는 작업 중 하나가 기존의 클래스 기반 컴포넌트를 함수형 컴포넌트 및 훅(Hooks)으로 마이그레이션하는 것입니다 [4].

*   **에러 바운더리(Error Boundaries)로서의 필수적 역할:** 
    대부분의 기능이 함수형 컴포넌트로 대체되었음에도 불구하고, 클래스 컴포넌트가 반드시 필요한 고유 영역이 존재합니다. 컴포넌트 트리 하위에서 발생하는 JavaScript 에러를 포착하여 애플리케이션 전체가 중단되는 것을 막아주는 '에러 바운더리'는 오직 클래스 컴포넌트로만 생성할 수 있습니다 [3, 6]. 

*   **라이프사이클 메서드를 통한 에러 처리:** 
    클래스 컴포넌트가 에러 바운더리로 동작하기 위해서는 특정 라이프사이클 메서드 중 하나 이상을 정의해야 합니다. 에러가 발생했을 때 깨진 컴포넌트 트리 대신 폴백(fallback) UI를 렌더링하려면 `static getDerivedStateFromError()` 메서드를 사용하며, 에러에 대한 상세 정보를 기록(log)하려면 `componentDidCatch()` 메서드를 사용합니다 [2, 6].

## 🔗 Knowledge Connections
- **Related Topics:** [[Functional Components]], [[Error Boundaries]], [[React Hooks]], [[Refactoring]]
- **Projects/Contexts:** [[레거시 React 코드베이스 마이그레이션]], [[React 애플리케이션 예외 및 에러 처리]]
- **Contradictions/Notes:** 전반적인 코드베이스 리팩토링 시에는 클래스 컴포넌트를 함수형 컴포넌트로 변경할 것을 강력히 권장하지만 [4], 에러 바운더리를 구현할 때만큼은 기술적 한계로 인해 오직 클래스 컴포넌트만 사용해야 한다는 예외가 존재합니다 [3].

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