React v19 - Actions, Server Components, Hydration 에러 개선, Document Metadata 지원 등

새로운 API 및 기능

• Actions: 데이터 변경과 상태 업데이트를 자동으로 처리. 대기 상태, 에러, optimistic update 등을 자동 관리
• useActionState: Actions의 일반적인 사용 사례를 간단히 처리할 수 있는 새로운 훅
• use API: 렌더링 중 프로미스 및 컨텍스트 읽기 가능
• useOptimistic: 비동기 요청 중 optimistic UI 업데이트를 쉽게 구현
• ref as a prop: 함수 컴포넌트에서 직접 ref prop 사용 가능 (forwardRef 불필요)
• <Context> as a Provider: <Context.Provider> 대신 <Context> 직접 사용 가능

문서 및 리소스 관리

• 메타데이터 지원: <title>, <link>, <meta> 태그를 컴포넌트에서 직접 사용 가능
• 스타일시트 지원: 컴포넌트 내에서 스타일시트 로딩 및 우선순위 관리
• 비동기 스크립트 지원: 컴포넌트 트리 어디에서나 비동기 스크립트 렌더링 가능
• 리소스 프리로딩: 성능 최적화를 위한 prefetchDNS, preconnect, preload, preinit API 제공

개선사항

• 커스텀 엘리먼트 지원: 커스텀 엘리먼트에 대한 완전한 지원 추가
• 에러 처리 개선: 중복 에러 제거 및 에러 처리 옵션 추가
• 서드파티 스크립트/확장 프로그램 호환성: 하이드레이션 과정에서 서드파티 콘텐츠 처리 개선
• hydration 에러 개선: 더 명확한 에러 메시지와 디버깅 정보 제공

서버 컴포넌트

• 안정화된 서버 컴포넌트: Canary 채널의 모든 서버 컴포넌트 기능이 React 19에 포함
• 서버 액션: 클라이언트 컴포넌트에서 서버 함수 호출 기능 제공

기타

• useDeferredValue 초기값: useDeferredValue에 초기값 옵션 추가
• ref 정리(cleanup) 함수: ref 콜백에서 정리 함수 반환 가능
• 새로운 Static API: prerender와 prerenderToNodeStream API 추가

[carnoxen]

이번 19에서는 논란이 있던 <Suspense>의 동작을 다시 정의했습니다. 이전까지만 해도 한 컴포넌트를 Suspense하면 다음 Suspense 컴포넌트까지 렌더링한 다음 폴백을 생성했지만, 현재는 한 컴포넌트를 Suspense하면 먼저 폴백을 생성하고 다음 Suspense 컴포넌트를 렌더링하는 순으로 바뀌었습니다.

Improvements to Suspense

한마디로 첫 렌더링 시간을 줄였다고 보면 됩니다. 잘 해결되어서 다행이군요.