> 2013년, Facebook(현 Meta)이 "우리는 DOM을 직접 조작하지 않겠다"며 React를 오픈소스로 공개했을 때, 많은 개발자들은 의아해했습니다.<br>하지만 선언적 UI와 단방향 데이터 흐름은 곧 프론트엔드 개발의 표준이 되었죠.<br>React가 어떻게 변화해왔는지, 주요 버전별 특징을 통해 그 흐름을 짚어봅니다.

![React Evolution](https://images.unsplash.com/photo-1633356122544-f134324a6cee?q=80&w=2070&auto=format&fit=crop)

# 1. 초기 React: Class Component와 생명주기 (v0.x ~ v15)

초기의 React는 객체 지향적인 접근 방식을 취했습니다. `React.createClass`나 ES6 `class extends React.Component`를 사용하여 컴포넌트를 정의했죠.

- **특징**: `this.state`로 상태를 관리하고, `componentDidMount`, `componentDidUpdate` 같은 생명주기(Lifecycle) 메서드로 시점을 제어했습니다.
- **문제점**: 
    - `this` 바인딩 문제로 인한 혼란.
    - 관심사의 분리 실패: 하나의 생명주기 메서드 안에 API 호출, 이벤트 리스너 등록 등 서로 다른 로직이 뒤섞임.
    - 재사용성 부족: HOC(Higher Order Component)나 Render Props 패턴이 나왔지만 코드가 복잡해짐(Wrapper Hell).

# 2. React 16: Fiber 아키텍처와 혁신의 시작 (2017)

React의 코어를 밑바닥부터 다시 짠 **Fiber 아키텍처**가 도입되었습니다. 겉으로 보이는 API 변화보다는 내부적인 렌더링 엔진의 교체가 핵심이었습니다.

- **주요 기능**:
    - **Error Boundaries**: 컴포넌트 에러를 잡아내는 `componentDidCatch` 도입.
    - **Portals**: 부모 컴포넌트의 DOM 계층 구조 바깥에 렌더링 가능 (모달 구현에 혁명).
    - **Fragments**: 불필요한 `div` 래퍼 없이 여러 엘리먼트 반환 가능.

# 3. React 16.8: Hooks의 등장 (2019) ⚡️

React 역사상 가장 충격적이고 위대한 업데이트입니다. **"함수형 컴포넌트에서도 상태를 가질 수 있다"**는 개념이 도입되었습니다.

- **Hooks (useState, useEffect)**:
    - Class를 작성할 필요가 없어졌습니다.
    - `this`의 고통에서 해방되었습니다.
    - 로직을 커스텀 훅(Custom Hook)으로 분리하여 재사용하기가 너무나 쉬워졌습니다.
- **결과**: Class Component는 레거시가 되었고, React 생태계는 함수형으로 대통합을 이룹니다.

# 4. React 17: 위대한 준비 (2020)

"No New Features"라는 슬로건을 걸고 나온 버전입니다. 기능 추가보다는 **점진적 업그레이드**를 위한 내부 공사에 집중했습니다.

- **이벤트 위임 변경**: `document`가 아닌 `root` 노드에 이벤트를 위임하여, 마이크로 프론트엔드 아키텍처나 다른 버전의 React와 공존하기 쉬워졌습니다.

# 5. React 18: 동시성(Concurrency)의 시대 (2022)

React가 렌더링을 멈추거나, 쪼개서 수행할 수 있게 되었습니다.

- **Concurrent Mode**:
    - **Automatic Batching**: 여러 상태 업데이트를 한 번의 리렌더링으로 묶어줌.
    - **Transitions (useTransition)**: UI 업데이트의 우선순위를 지정하여, 무거운 렌더링 중에도 입력창이 버벅이지 않게 함.
    - **Suspense**: 데이터 로딩 상태를 선언적으로 처리.

# 6. React 19: 서버가 된 컴포넌트 (2024~)

이제 React는 단순한 클라이언트 라이브러리를 넘어 풀스택 프레임워크를 위한 아키텍처로 진화하고 있습니다.

- **RSC (React Server Components)**: 컴포넌트가 서버에서 렌더링되고, 결과 HTML만 클라이언트로 전송됩니다. 번들 사이즈가 0(Zero Bundle Size)이 될 수 있습니다.
- **Actions**: `<form>` 제출 처리를 위한 서버 액션을 기본 지원합니다.
- **React Compiler**: `useMemo`, `useCallback` 같은 수동 최적화를 컴파일러가 알아서 해주는 시대가 오고 있습니다 (React Forget).

# 마치며

React는 멈추지 않습니다. View 라이브러리에서 시작하여 이제는 메타 프레임워크(Next.js, Remix)의 기반 엔진이 되었습니다.
Class 시절부터 해오신 분들에게는 격세지감이, 새로 시작하는 분들에게는 RSC라는 새로운 파도가 느껴지실 겁니다. 앞으로의 10년은 또 어떻게 변할까요? ⚛️

React의 진화: Class Component에서 Server Component까지

댓글 0

React 19 & Compiler: 수동 최적화의 종말과 DX의 혁명