1장: React 19의 등장과 새로운 패러다임

React 18이 동시성 렌더링(Concurrent Rendering)이라는 새로운 기반을 마련한 지 약 2년 만에, React 19가 2024년 12월 5일 정식 출시되었습니다. 이번 메이저 업데이트는 단순한 기능 추가가 아닌, React 애플리케이션을 설계하고 구축하는 방식 자체를 근본적으로 재정의합니다.

이 장에서는 React 19가 등장한 배경, 핵심 변경사항의 전체 그림, 그리고 이 시리즈에서 다룰 내용을 개괄적으로 살펴봅니다.

React의 진화 흐름

React의 메이저 버전은 각각 명확한 패러다임 전환을 가져왔습니다.

React 16.8의 Hooks가 클래스 컴포넌트에서 함수 컴포넌트로의 전환을 이끌었다면, React 19는 클라이언트 중심 렌더링에서 서버-클라이언트 하이브리드 아키텍처로의 전환을 이끕니다.

React 19가 해결하려는 문제들

데이터 페칭의 복잡성

기존 React 애플리케이션에서 데이터를 가져오는 코드를 떠올려봅시다.

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);
 
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
 
    fetchUser(userId)
      .then((data) => {
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      })
      .catch((err) => {
        if (!cancelled) {
          setError(err);
          setLoading(false);
        }
      });
 
    return () => { cancelled = true; };
  }, [userId]);
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <div>{user?.name}</div>;
}

로딩 상태 관리, 에러 처리, 경쟁 조건(Race Condition) 방지를 위한 취소 로직까지, 단순한 데이터 페칭에도 상당한 보일러플레이트가 필요합니다. React 19에서는 이 패턴이 극적으로 단순해집니다.

async function UserProfile({ userId }: { userId: string }) {
  const user = await fetchUser(userId);
  return <div>{user.name}</div>;
}

Server Component에서는 async/await를 직접 사용할 수 있고, 로딩과 에러 처리는 Suspense와 Error Boundary가 선언적으로 담당합니다.

폼 처리의 비효율

폼 제출 역시 useState와 useEffect의 조합으로 처리해왔습니다.

function CreatePost() {
  const [title, setTitle] = useState('');
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsPending(true);
    setError(null);
 
    try {
      await createPost({ title });
      setTitle('');
    } catch (err) {
      setError('게시물 생성에 실패했습니다.');
    } finally {
      setIsPending(false);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button disabled={isPending}>
        {isPending ? '저장 중...' : '저장'}
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

React 19의 Actions와 새로운 훅들은 이 패턴을 획기적으로 개선합니다.

function CreatePost() {
  const [state, formAction, isPending] = useActionState(
    async (prevState: FormState, formData: FormData) => {
      const title = formData.get('title') as string;
      const result = await createPost({ title });
      if (!result.success) return { error: '게시물 생성에 실패했습니다.' };
      return { error: null };
    },
    { error: null }
  );
 
  return (
    <form action={formAction}>
      <input name="title" />
      <SubmitButton />
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

상태 관리, 로딩 처리, 에러 핸들링이 하나의 훅으로 통합되었습니다.

번들 크기와 성능

클라이언트 사이드 렌더링(CSR)에서는 모든 코드가 브라우저로 전송됩니다. 마크다운 파서, 날짜 라이브러리, 유효성 검사 로직 등 서버에서만 실행해도 충분한 코드까지 클라이언트 번들에 포함됩니다.

React Server Components는 서버에서만 실행되는 컴포넌트를 도입하여 이 문제를 근본적으로 해결합니다. 서버 컴포넌트에서 사용하는 라이브러리는 클라이언트 번들에 포함되지 않습니다.

수동 메모이제이션의 부담

React 개발자라면 useMemo, useCallback, React.memo를 어디에 적용해야 할지 고민한 경험이 있을 것입니다. 성능 최적화를 위한 메모이제이션은 코드 복잡도를 높이고, 잘못 적용하면 오히려 성능을 저하시킵니다.

React Compiler는 빌드 타임에 자동으로 메모이제이션을 적용하여 이 부담을 완전히 제거합니다.

React 19의 핵심 변경사항 한눈에 보기

React 19의 변경사항은 크게 다섯 가지 축으로 구성됩니다.

1. React Server Components (RSC)

서버에서만 실행되는 컴포넌트입니다. 데이터베이스 접근, 파일 시스템 읽기, 외부 API 호출을 컴포넌트 안에서 직접 수행할 수 있으며, 관련 JavaScript는 클라이언트에 전송되지 않습니다.

// 기본적으로 모든 컴포넌트는 Server Component
async function ArticleList() {
  const articles = await db.articles.findMany({
    orderBy: { createdAt: 'desc' },
    take: 10,
  });
 
  return (
    <ul>
      {articles.map((article) => (
        <li key={article.id}>
          <ArticleCard article={article} />
        </li>
      ))}
    </ul>
  );
}

2. Server Actions

클라이언트에서 호출하면 서버에서 실행되는 비동기 함수입니다. 폼 제출, 데이터 변경(Mutation) 등의 서버 측 로직을 안전하게 처리합니다.

'use server';
 
export async function updateArticle(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
 
  await db.articles.update({
    where: { id: formData.get('id') as string },
    data: { title, content },
  });
 
  revalidatePath('/articles');
}

3. 새로운 훅과 API

4. React Compiler

빌드 타임에 컴포넌트를 분석하여 자동으로 메모이제이션을 적용하는 최적화 컴파일러입니다. useMemo, useCallback, React.memo를 수동으로 작성할 필요가 없어집니다.

5. DX 개선사항

• ref가 일반 props로 전달: forwardRef 래퍼가 불필요해졌습니다.
• 메타데이터 태그 호이스팅: <title>, <meta> 등을 컴포넌트 내에서 직접 렌더링하면 자동으로 <head>로 이동합니다.
• 리소스 프리로딩 API: preload(), preinit() 등으로 리소스 로딩을 세밀하게 제어합니다.
• 향상된 하이드레이션 에러: 서버와 클라이언트의 불일치를 정확하게 보여주는 diff 형태의 에러 메시지를 제공합니다.

Server와 Client의 새로운 경계

React 19의 가장 본질적인 변화는 컴포넌트가 실행되는 위치를 명시적으로 구분한다는 점입니다.

두 개의 디렉티브가 이 경계를 정의합니다.

• 'use client': 이 파일의 컴포넌트는 클라이언트에서 실행됩니다. useState, useEffect 등 클라이언트 훅을 사용할 수 있습니다.
• 'use server': 이 함수는 서버에서 실행됩니다. 클라이언트에서 호출하면 자동으로 서버 요청이 발생합니다.

디렉티브가 없는 컴포넌트는 기본적으로 Server Component로 취급됩니다. 이는 React의 기본값이 "서버 우선"으로 전환되었음을 의미합니다.

React 19.1과 19.2의 후속 개선

React 19는 출시 이후에도 빠르게 진화하고 있습니다.

React 19.1 (2025년 6월)에서는 안정성 개선과 버그 수정이 이루어졌습니다.

React 19.2 (2025년 10월)에서는 다음과 같은 주요 기능이 추가되었습니다.

• Suspense 배칭: 서버 렌더링된 Suspense 경계들이 비슷한 시점에 완료되면 함께 드러납니다(reveal). LCP(Largest Contentful Paint) 2.5초를 보호하는 휴리스틱이 포함되어 있습니다.
• <Activity /> 컴포넌트: 숨겨진 상태에서도 컴포넌트의 state를 유지하며 프리렌더링할 수 있는 새로운 컴포넌트입니다.
• useEffectEvent: Effect의 의존성에서 이벤트 로직을 분리하여 불필요한 재실행을 방지합니다.
• Partial Pre-rendering: 정적 셸을 먼저 렌더링하고, 동적 콘텐츠는 나중에 스트리밍하는 기법입니다.

이 시리즈의 구성

이 시리즈는 React 19의 모든 핵심 기능을 깊이 있게 다룹니다. 각 장은 독립적으로 읽을 수 있지만, 순서대로 읽으면 React 19의 전체 패러다임을 체계적으로 이해할 수 있습니다.

학습 사전 요구사항

이 시리즈를 최대한 활용하려면 다음 지식이 필요합니다.

• React 18의 기본 개념 (컴포넌트, Hooks, JSX)
• TypeScript 기초 문법
• Node.js와 npm/pnpm 기본 사용법
• Next.js 기초 (App Router 권장, 필수는 아님)

React 19는 프레임워크에 독립적이지만, 실전에서는 Next.js, Remix 등과 함께 사용되는 경우가 대부분입니다. 이 시리즈에서는 Next.js App Router를 기준으로 예제를 구성하되, 프레임워크에 종속되지 않는 핵심 개념에 집중합니다.

핵심 요약

• React 19는 2024년 12월에 출시된 메이저 업데이트로, 서버-클라이언트 하이브리드 아키텍처를 정식으로 도입했습니다.
• Server Components, Server Actions, 새로운 훅(useActionState, useFormStatus, useOptimistic), use() API, React Compiler가 핵심 변경사항입니다.
• 기본값이 "서버 우선"으로 전환되어, 디렉티브 없는 컴포넌트는 Server Component로 취급됩니다.
• React 19.1과 19.2에서 Suspense 배칭, Activity 컴포넌트, Partial Pre-rendering 등의 후속 개선이 이루어졌습니다.

다음 장에서는 React 19의 가장 핵심적인 변화인 React Server Components의 아키텍처를 심층적으로 분석합니다.