React 19의 새로운 기능 정리

React 19가 정식 출시되며 Server Components 아키텍처, Server Actions, 새로운 훅(useActionState/useFormStatus/useOptimistic), `use` API 등 프레임워크 패러다임을 바꾸는 기능들이 대거 포함됐다. 클라이언트에 전달되는 JavaScript 번들을 줄이고 서버에서 데이터 패칭을 통합하는 방향으로 전반적인 아키텍처가 진화했다.

핵심 포인트

Server Components로 클라이언트 JS 번들 감소, 서버 선처리 데이터 패칭으로 초기 로드 및 SEO 개선
Server Actions으로 클라이언트 컴포넌트에서 서버 함수 직접 호출 가능, 별도 API 엔드포인트 불필요
`useActionState`/`useFormStatus`/`useOptimistic` 세 신규 훅으로 폼·비동기 상태 관리 패턴 표준화
`use` API: 훅 규칙 제약 없이 루프·조건문 내에서도 Promise와 Context 사용 가능
`ref`가 일반 prop으로 전달 가능해져 `forwardRef` 불필요, Context의 `.Provider` 래퍼도 제거
문서 메타데이터(`<title>`, `<meta>`)를 컴포넌트에서 직접 렌더링, 스타일시트 우선순위 제어 가능

상세 정리

Server Components: 서버에서 렌더링해 완성된 HTML 전달, 로딩 상태·추가 렌더 불필요
`'use client'`/`'use server'` 지시문으로 번들러에 실행 컨텍스트 명시
Actions: 기존 이벤트 핸들러 대체, React transitions와 통합되어 pending 상태 자동 관리
`useActionState`: 폼 제출 상태·에러·pending 상태를 일원화해 관리
`useFormStatus`: 부모 폼의 pending 상태를 하위 컴포넌트에서 구독
`useOptimistic`: 서버 응답 대기 없이 UI를 즉시 갱신, 실패 시 자동 롤백
`use(promise)`: Suspense와 연동해 비동기 데이터를 렌더링 흐름에 자연스럽게 통합
Resource Preloading: `prefetchDNS`, `preconnect`, `preload` API로 페이지 로드 타이밍 최적화
Ref as prop: `forwardRef` 래퍼 없이 ref를 일반 prop처럼 전달 가능
Stylesheet 지원: `precedence` prop으로 스타일시트 우선순위 제어, 컴포넌트와 함께 배치 가능
오류 보고 개선: hydration 오류 메시지 통합, `onCaughtError`/`onUncaughtError`/`onRecoverableError` 훅 추가

왜 읽나React 19의 핵심 변화는 단순 기능 추가가 아닌 서버·클라이언트 경계를 코드 레벨에서 명시하는 아키텍처 전환이므로, 기존 프로젝트 마이그레이션 전에 전체 그림을 파악해두는 것이 필수다.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

React 19의 새로운 기능 정리

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기