React v19 출시! 새로운 기능으로 프론트엔드 개발 생산성 UP!

React 19 정식 출시, Actions, useOptimistic, use 등 새로운 기능 도입

React DOM의 Static APIs 추가 및 Server Components 지원 강화

Custom Elements 지원, Document Metadata 및 Stylesheet 관리 기능 개선

Actions: 데이터 변경과 UI 업데이트 자동화

Actions는 React 19에서 새롭게 도입된 기능으로, 데이터 변경 후 UI 업데이트를 자동화한다. 구체적으로 useActionState 훅을 통해 pending 상태 관리, 오류 처리, 낙관적 업데이트를 간편하게 처리한다. 따라서 개발자는 폼 제출 및 API 요청 관련 코드를 더욱 간결하게 작성할 수 있다.

use, useOptimistic, useFormStatus: 렌더링 성능 향상

use API는 렌더링 중에 Promise를 읽어오고, Suspense를 활용하여 로딩 상태를 관리한다. useOptimistic 훅은 낙관적 UI 업데이트를 쉽게 구현하도록 돕는다. useFormStatus는 폼 상태를 컴포넌트 내에서 접근할 수 있게 해준다. 따라서 사용자 경험을 개선하고, 코드 중복을 줄일 수 있다.

React DOM Static APIs: 정적 사이트 생성 최적화

React DOM Static APIs는 정적 사이트 생성(SSG)을 위한 새로운 API를 제공한다. prerender 및 prerenderToNodeStream API를 통해 스트리밍 환경에서 정적 HTML을 생성할 수 있다. 반면 기존 renderToString 방식보다 데이터 로딩을 효율적으로 처리하여 검색 엔진 최적화(SEO)에 유리하다.