> 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까지

> "React 배우기 어렵나요?" 라고 물으면 항상 나오는 대답이 있습니다.<br>"Hooks의 의존성 배열(Dependency Array) 관리만 익숙해지면 할 만해요."<br>하지만 이제 이 말도 옛말이 되었습니다. **React 19**와 **React Compiler**의 등장으로, 우리는 더 이상 렌더링 최적화에 골머리를 앓을 필요가 없어졌기 때문입니다.<br>이번 포스팅에서는 React 생태계를 송두리째 바꾼 이 두 가지 거대한 변화에 대해 아주 상세하게 알아봅니다.

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

# 1. The Pain Points: 우리가 겪던 고통

React 개발자라면 누구나 한 번쯤 `useEffect`나 `useMemo`의 의존성 배열(`[]`) 때문에 버그를 만들어본 적이 있을 겁니다.

```javascript
// ❌ 실수하기 딱 좋은 코드
const filteredTodos = useMemo(() => {
  return todos.filter(t => t.status === filter);
}, [todos]); // 실수로 filter를 빼먹음! -> 필터가 안 바뀜
```

이런 실수를 잡기 위해 `eslint-plugin-react-hooks`를 썼지만, 때로는 불필요한 리렌더링을 막기 위해 코드 전체를 `useCallback`으로 감싸야 하는 **"Memoization Hell"**에 빠지기도 했습니다.

# 2. React Compiler: 자동 메모이제이션의 시대

**React Compiler (구 React Forget)**는 이 모든 고통을 없애줍니다. 이 컴파일러는 빌드 타임에 코드를 분석하여, **값이 변경되었을 때만 컴포넌트나 UI 조각이 다시 렌더링되도록 자동으로 코드를 변환**합니다.

### 🛠 어떻게 동작하나요?

개발자가 `useMemo`를 쓰지 않아도, 컴파일러가 알아서 판단합니다.

**[Before: 개발자가 짠 코드]**
```javascript
function TodoList({ todos, filter }) {
  const filtered = todos.filter(t => t.status === filter);
  return <List items={filtered} />;
}
```

**[After: 컴파일러가 변환한 코드 (개념적)]**
```javascript
function TodoList({ todos, filter }) {
  const $ = useMemoCache(2);
  let filtered;
  // todos나 filter가 바뀌었을 때만 계산 수행
  if ($[0] !== todos || $[1] !== filter) {
    filtered = todos.filter(t => t.status === filter);
    $[0] = todos;
    $[1] = filter;
    $[2] = filtered;
  } else {
    filtered = $[2];
  }
  return <List items={filtered} />;
}
```

이제 개발자는 **"무엇(What)"**을 렌더링할지만 고민하면 됩니다. **"어떻게(How)"** 효율적으로 렌더링할지는 컴파일러의 몫입니다.

# 3. React 19의 핵심: Actions & New Hooks

컴파일러가 최적화를 담당한다면, React 19는 **데이터 흐름(Data Flow)**을 혁신했습니다. 핵심 키워드는 **"Actions"**입니다.

### ✅ Actions (`<form action={fn}>`)

더 이상 `onSubmit`, `e.preventDefault()`, 수동 `fetch`, `isLoading` 상태 관리를 할 필요가 없습니다.

```javascript
// 서버 액션 함수
async function updateProfile(formData) {
  'use server';
  await db.user.update(...);
}

// 컴포넌트
function Profile() {
  return (
    <form action={updateProfile}>
      <input name="name" />
      <button type="submit">저장</button>
    </form>
  );
}
```
HTML의 기본 폼 동작을 확장하여, React가 비동기 요청의 생명주기를 자동으로 관리해줍니다.

### ✅ useOptimistic: 낙관적 업데이트가 공짜

"좋아요" 버튼을 눌렀을 때, 서버 응답을 기다리지 않고 즉시 하트가 빨개지게 만드는 것(Optimistic UI)은 꽤 복잡한 구현이 필요했습니다. React 19에서는 훅 하나로 끝납니다.

```javascript
const [optimisticLikes, addOptimisticLike] = useOptimistic(
  likes,
  (state, newLike) => state + 1
);
```

### ✅ useFormStatus: Props Drilling 안녕

폼 내부 깊숙한 곳에 있는 제출 버튼이 "로딩 중" 상태를 알아야 할 때, 예전에는 props로 `isLoading`을 내려줬어야 했습니다. 이제는 훅으로 상태를 구독합니다.

```javascript
function SubmitButton() {
  const { pending } = useFormStatus(); // 부모 폼의 상태를 바로 읽음
  return <button disabled={pending}>{pending ? '저장 중...' : '저장'}</button>;
}
```

# 4. use API: 렌더링 중에 Promise 읽기

`useEffect` 안에서 데이터를 가져오는 패턴도 사라지고 있습니다. 새로운 `use` API는 렌더링 함수 내부에서 Promise(비동기 데이터)나 Context를 바로 읽을 수 있게 해줍니다.

```javascript
function Comments({ commentsPromise }) {
  // Promise가 해결될 때까지 React가 자동으로 Suspense를 보여줌
  const comments = use(commentsPromise);
  return comments.map(c => <p>{c.text}</p>);
}
```

# 마치며: DX(개발자 경험)의 승리

React 19와 Compiler의 등장은 단순한 기능 추가가 아닙니다. **"React를 작성하는 멘탈 모델"** 자체가 바뀌었습니다.

1.  **메모이제이션 걱정 끝**: 비즈니스 로직에만 집중하세요.
2.  **보일러플레이트 감소**: `useEffect`, `useState` 범벅이던 데이터 페칭 코드가 `Action`과 `use`로 깔끔해졌습니다.
3.  **서버-클라이언트 융합**: RSC와 Server Actions로 경계가 허물어졌습니다.

이제 React는 단순한 UI 라이브러리가 아니라, **풀스택 애플리케이션을 위한 운영체제**에 가까워지고 있습니다. 2026년, React를 다시 배워야 할 이유입니다. ⚛️

React

모든 포스트

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

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

인기 태그