# React v19 - Actions, Server Components, Hydration 에러 개선, Document Metadata 지원 등 > Clean Markdown view of GeekNews topic #18128. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=18128](https://news.hada.io/topic?id=18128) - GeekNews Markdown: [https://news.hada.io/topic/18128.md](https://news.hada.io/topic/18128.md) - Type: news - Author: [ssssut](https://news.hada.io/@ssssut) - Published: 2024-12-06T14:27:03+09:00 - Updated: 2024-12-06T14:27:03+09:00 - Original source: [react.dev](https://react.dev/blog/2024/12/05/react-19) - Points: 11 - Comments: 1 ## Summary React v19에서는 데이터 변경과 상태 업데이트를 자동으로 처리하는 Actions API와 이를 간단히 사용할 수 있는 `useActionState` 훅이 도입되었습니다. 또한, 메타데이터와 스타일시트를 컴포넌트 내에서 직접 관리할 수 있는 기능이 추가되었으며, 서버 컴포넌트 기능이 안정화되었습니다. 이 외에도 커스텀 엘리먼트 지원, 에러 처리 개선, 하이드레이션 에러 메시지 개선 등 다양한 개선사항이 포함되었습니다. ## Topic Body ##### 새로운 API 및 기능 - **Actions**: 데이터 변경과 상태 업데이트를 자동으로 처리. 대기 상태, 에러, optimistic update 등을 자동 관리 - **`useActionState`**: Actions의 일반적인 사용 사례를 간단히 처리할 수 있는 새로운 훅 - **`use` API**: 렌더링 중 프로미스 및 컨텍스트 읽기 가능 - **`useOptimistic`**: 비동기 요청 중 optimistic UI 업데이트를 쉽게 구현 - **`ref` as a prop**: 함수 컴포넌트에서 직접 ref prop 사용 가능 (`forwardRef` 불필요) - **`<Context>` as a Provider**: `` 대신 `<Context>` 직접 사용 가능 ##### 문서 및 리소스 관리 - **메타데이터 지원**: `<title>`, `<link>`, `<meta>` 태그를 컴포넌트에서 직접 사용 가능 - **스타일시트 지원**: 컴포넌트 내에서 스타일시트 로딩 및 우선순위 관리 - **비동기 스크립트 지원**: 컴포넌트 트리 어디에서나 비동기 스크립트 렌더링 가능 - **리소스 프리로딩**: 성능 최적화를 위한 `prefetchDNS`, `preconnect`, `preload`, `preinit` API 제공 ##### 개선사항 - **커스텀 엘리먼트 지원**: 커스텀 엘리먼트에 대한 완전한 지원 추가 - **에러 처리 개선**: 중복 에러 제거 및 에러 처리 옵션 추가 - **서드파티 스크립트/확장 프로그램 호환성**: 하이드레이션 과정에서 서드파티 콘텐츠 처리 개선 - **hydration 에러 개선**: 더 명확한 에러 메시지와 디버깅 정보 제공 ##### 서버 컴포넌트 - **안정화된 서버 컴포넌트**: Canary 채널의 모든 서버 컴포넌트 기능이 React 19에 포함 - **서버 액션**: 클라이언트 컴포넌트에서 서버 함수 호출 기능 제공 ##### 기타 - **`useDeferredValue` 초기값**: `useDeferredValue`에 초기값 옵션 추가 - **ref 정리(cleanup) 함수**: ref 콜백에서 정리 함수 반환 가능 - **새로운 Static API**: `prerender`와 `prerenderToNodeStream` API 추가 ## Comments ### Comment 32096 - Author: carnoxen - Created: 2024-12-06T15:55:10+09:00 - Points: 1 이번 19에서는 논란이 있던 `<Suspense>`의 동작을 다시 정의했습니다. 이전까지만 해도 한 컴포넌트를 Suspense하면 다음 Suspense 컴포넌트까지 렌더링한 다음 폴백을 생성했지만, 현재는 한 컴포넌트를 Suspense하면 먼저 폴백을 생성하고 다음 Suspense 컴포넌트를 렌더링하는 순으로 바뀌었습니다. [Improvements to Suspense](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense) 한마디로 첫 렌더링 시간을 줄였다고 보면 됩니다. 잘 해결되어서 다행이군요.