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 19 & Compiler: 수동 최적화의 종말과 DX의 혁명

댓글 0

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