React 19의 새로운 기능들

React 19는 오랫동안 기다려온 메이저 업데이트입니다. 이번 릴리즈에서는 개발자 경험을 크게 향상시키는 여러 새로운 기능들이 추가되었습니다.

Actions API

React 19의 가장 큰 변화 중 하나는 Actions입니다. 이제 비동기 트랜지션을 더 쉽게 처리할 수 있으며, 로딩 상태, 에러 처리, 낙관적 업데이트를 자동으로 관리해줍니다.

"use server";
 
async function submitForm(formData: FormData) {
  const name = formData.get("name") as string;
  await db.users.create({ name });
}

폼과 함께 사용할 때 useActionData와 useNavigation으로 pending/error 상태를 손쉽게 다룰 수 있습니다.

use() 훅

새로운 use() 훅은 Promise와 Context를 렌더링 중에 직접 읽을 수 있게 해줍니다. Suspense와 함께 사용하면 비동기 데이터를 더 선언적으로 처리할 수 있습니다.

function Profile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}

React 19는 현재 RC 단계입니다. 프로덕션 환경에서 사용하기 전에 변경사항을 충분히 테스트하세요.

서버 컴포넌트 개선

React 19에서는 서버 컴포넌트가 안정화되었습니다. 이제 서버에서 직접 데이터를 fetch하고 클라이언트에 전달하는 패턴이 더 간결해졌습니다. "use server"와 "use client" 디렉티브로 경계를 명확히 할 수 있습니다.