React 19 베타 패치 노트 - BizSpring BLOG
핵심 요약
- React 19 베타에서 도입된 액션(Actions) 개념으로 대기 상태, 에러, 낙관적 업데이트를 자동으로 처리할 수 있다.
- useOptimistic, useActionState 등 새로운 훅과 form의 action/formAction 프로퍼티로 양식 처리가 단순화된다.
- 렌더링 중 리소스를 읽는 새 API 'use'가 도입되어 useMemo, useCallback, memo를 대체할 수 있다.
- 함수 컴포넌트에서 ref를 prop으로 바로 받을 수 있게 되어 forwardRef가 더 이상 필요 없어진다.
- 하이드레이션 에러 메시지가 하나로 통합되고, Context.Provider 대신 <Context>를 직접 사용할 수 있게 개선되었다.
# React 19 베타 패치 노트
2024년 07월 05일 2024년 07월 09일
테크
📌 React 19에서 새롭게 등장하는 것은 무엇인가요?
액션(Actions)
React 애플리케이션에서는 데이터를 변경하고 이에 대한 응답을 기반으로 상태를 업데이트하는 것이 일반적입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식(form)을 제출하면, API 요청을 보낸 다음 응답을 처리합니다. 이전에는 대기 상태(pending state), 에러, 낙관적 업데이트, 순차적 요청을 직접 처리해야만 했습니다.
예를 들어 위와 같이 useState 로 대기와 에러 상태를 다룰 수 있었습니다.
React 19 에서는 트랜지션에서 비동기 함수를 사용하여 대기 상태, 에러, 양식, 낙관적 업데이트를 자동으로 처리하는 기능이 추가됩니다.
위와 같이 useTransition 을 사용하여 대기 상태를 다룰 수 있습니다.
비동기 트랜지션은 isPending 값을 즉시 true로 설정하며 비동기 요청을 보내고, 트랜지션이 수행되면 isPending 을 false로 전환합니다. 이러한 방식은 데이터가 변경되는 동안에도 현재 UI의 반응성 및 상호작용을 유지할 수 있습니다.
📋 Note
컨벤션에 따라 비동기 트랜지션(async transition)을 사용하는 함수는 “액션(Actions)”라고 부릅니다.
액션은 데이터 제출을 자동으로 관리합니다.
대기 상태(Pending state) : 액션은 요청이 시작될 때 함께 시작하며, 최종 상태 업데이트가 커밋되면 자동으로 재설정되는 대기 상태를 제공합니다.
낙관적 업데이트(Optimistic updates) : 액션은 새로운 훅인 useOptimistic 을 지원합니다. 사용자들이 요청을 제출했을 때 즉각적인 응답을 제공할 수 있습니다.
useOptimistic을 이용해서 변경하게 되면 transition중에는 화면에 반영되고, transition이 종료되면 다시 rollback 하게 됩니다.
useOptimistic의 목적은 유저에게 즉각적인 변경되는 상태를 보여주기 위함입니다.
요청이 끝나기 전에 우선 화면에 보여주고 요청이 완료되면 응답 데이터로 업데이트하는 방식으로 사용합니다.
에러 처리(Error handling) : 액션은 에러 처리 기능을 제공하므로 요청이 실패했을 때 에러 바운더리를 표시할 수 있습니다. 또한 낙관적 업데이트로 수정된 값을 자동으로 원래의 값으로 복구할 수 있습니다.
양식(Forms) : 이제 <form> 요소에 action 과 formAction 프로퍼티에 함수를 전달할 수 있습니다. action 프로퍼티에 함수를 전달하면 기본적으로 액션을 사용하고 제출 후에 자동으로 양식을 재설정합니다.
액션을 기반으로 구축된 React 19 는 낙관적 업데이트의 처리를 위한 useOptimistic, 액션의 일반적인 사용을 다루기 위한 새로운 훅 React.useActionstate을 도입하며, react-dom에서는 양식을 자동으로 관리하는 formActions, 양식에서 액션을 지원하는 useFormStatus를 추가하고 있습니다. React 19 에서는 위의 예시를 아래와 같이 단순하게 작성할 수 있습니다.
새로운 훅 : use
React 19 에서는 렌더링에서 리소스를 읽는 새로운 API인 use 를 도입합니다. use 를 사용하게 되면, react 최적화를 위해서 사용되는 useMemo, useCallback, memo 가 대체됩니다. → 즉, 앞으로는 react 컴파일러에서 직접 최적화를 진행해주기 때문에 비즈니스 로직 에 더욱 집중을 하면 되겠습니다.
사용하는 예시를 보자면 use 로 프로미스를 읽는 경우, 프로미스가 해결(resolve)될 때까지 React는 일시 중단됩니다.
📋 Note
use는 렌더링 중 생성된 프로미스를 지원하지 않습니다. 렌더링 중 생성된 프로미스를 use 에 전달하면 React는 아래와 같은 경고를 표시합니다.
이를 해결하려면 프로미스 캐싱을 지원하는 서스펜스 기반의 라이브러리 또는 프레임워크에서 프로미스를 전달해야 합니다. 향후 렌더링에서 프로미스를 더 쉽게 캐싱하는 기능을 제공할 계획이라고 합니다.
use 로 Context 를 읽을 수도 있으며, 얼리 리턴과 같이 조건부로 Context 를 읽는 것도 가능합니다.
use API는 훅과 비슷하게 렌더에서만 호출될 수 있습니다. 훅과 다른 점은 조건부 호출이 가능하다는 것입니다. 향후에는 렌더링에서 리소스를 사용하는 use 의 더 많은 방법을 지원할 계획이라고 합니다.
📌 React 19에서 무엇이 개선되었나요?
프로퍼티(prop)가 된 ref
React 19 부터 함수 컴포넌트에서 ref 를 프로퍼티(prop)로 접근할 수 있습니다.
React 19 의 새로운 함수 컴포넌트에서는 더 이상 forwardRef 를 사용하지 않아도 됩니다. ref 프로퍼티(prop)를 사용하도록 자동으로 수정하는 codemod를 출시할 예정이며, 향후 버전에서는 forwardRef 를 사용하지 않고 제거할 계획이라고 합니다.
📋 Note
클래스 컴포넌트에 전달된 refs 는 컴포넌트 인스턴스를 참조하므로 프로퍼티로 전달되지 않습니다.
하이드레이션 에러 개선
react-dom 에서의 하이드레이션 에러를 보고하는 방식 또한 개선되었습니다. 예를 들어, 개발 모드에서 하이드레이션 불일치가 발생했을 때 구체적인 정보 없이 여러 에러를 보여주고 있었습니다.
이제 React 19 에서는 어떻게 불일치가 발생했는지 하나의 에러 메시지로만 기록합니다.
프로바이더가 된 <Context>
React 19 에서는 <Context.Provider> 대신 <Context> 를 프로바이더로서 렌더링할 수 있습니다.
이제 컨텍스트 프로바이더는 <Context> 를 사용할 수 있으며, 이미 사용중인 프로바이더를 변환하는 codemod 또한 출시될 예정입니다. 향후 버전에서는 <Context.Provider> 가 폐기됩니다.
여기까지 React 19 패치 내용에 대해서 간략하게 알아봤습니다. React는 하위 호환성을 잘 보장해주기 때문에 출시 후 바로 해당 내용들에 대한 반영을 이룰 필요는 없겠지만, 미리미리 숙지해두고 천천히 적용하며 새로운 React 19에 적응하는 시간이 필요할 것 같습니다.
공식 문서 React 19 Beta 를 참조하여 작성된 글입니다.
Related Posts via Categories
구글애즈가 정확검색·구문검색 키워드까지 AI 모드에 노출하기 시작했다 — 자동화 상품 없이 AI 답변 화면에 들어가는 첫 실험
AI가 React 앱을 직접 디버깅 – Agent 기반 디버깅
ChatGPT 광고가 픽셀·전환 API·맞춤 오디언스를 갖췄다 — 답변 화면이 측정 가능한 광고 매체가 되는 순간
AI 시대, 데이터도 설명이 필요합니다
MCP 클라이언트는 Authorization Server를 어떻게 찾는가: 공식 MCP TypeScript SDK와 VS Code 구현 비교
RAG 시대의 GEO: AI가 콘텐츠를 읽는 방식과 스키마의 진짜 역할
AI 에이전트로 웹 데이터 수집 가능 여부 자동 검증하기
GA4 Intraday 실시간 테이블, 대시보드 원천 데이터로 바로 사용할 수 있을까?
워크플로우 오케스트레이션 플랫폼 Temporal 알아보기
iOS 14.5부터 GA4까지, 환경 변화가 가져온 업무 폭증을 해결하는 실무 전략은…?
다음에 대해 검색하기...
최신 글 둘러보기
기존 SEO와 무엇이 같고 무엇이 다른가
콘텐츠가 답인 걸 모르는 사람은 없습니다 — 문제는 지속입니다
광고비를 늘리지 않고 매출을 늘린 회사들은 무엇을 했나
코호트로 비교하면 광고 예산 판단이 달라집니다
GEO를 위한 글쓰기를 위한 작은 노하우
(해외동향) 광고주가 광고플랫폼 리포트에서 자체 측정으로 옮겨가고 있다.
구글애즈가 정확검색·구문검색 키워드까지 AI 모드에 노출하기 시작했다 — 자동화 상품 없이 AI 답변 화면에 들어가는 첫 실험
AI가 React 앱을 직접 디버깅 – Agent 기반 디버깅
ChatGPT 광고가 픽셀·전환 API·맞춤 오디언스를 갖췄다 — 답변 화면이 측정 가능한 광고 매체가 되는 순간
마케팅 자동화, 무엇부터 자동화해야 할까?
출처: https://blog.bizspring.co.kr/%ed%85%8c%ed%81%ac/react-19-%eb%b2%a0%ed%83%80-%ed%8c%a8%ec%b9%98-%eb%85%b8%ed%8a%b8/
자주 묻는 질문
React 19의 액션(Actions)이 정확히 뭔가요?
트랜지션에서 비동기 함수를 사용해 대기 상태, 에러, 낙관적 업데이트, 양식 처리를 자동으로 관리하는 기능입니다. 이전에는 useState로 직접 대기/에러 상태를 다뤄야 했지만, 이제는 useTransition 등을 통해 자동화됩니다.
useOptimistic은 어떻게 동작하나요?
요청이 완료되기 전에 우선 화면에 변경된 상태를 보여주고, 트랜지션이 끝나면 실제 응답 데이터로 업데이트하거나 롤백하는 방식입니다. 사용자에게 즉각적인 반응성을 제공하기 위한 훅입니다.
새로운 use API는 기존 useMemo, useCallback과 뭐가 다른가요?
use는 렌더링에서 리소스(프로미스나 Context 등)를 읽는 새로운 API로, react 컴파일러가 직접 최적화를 담당하게 되면서 useMemo, useCallback, memo를 대체하게 됩니다. 단, 렌더링 중 생성된 프로미스는 지원하지 않으며 서스펜스 기반 라이브러리를 통해 전달해야 합니다.
forwardRef를 이제 안 써도 되나요?
네, React 19부터는 함수 컴포넌트에서 ref를 prop으로 바로 접근할 수 있어 forwardRef가 필요 없어집니다. 기존 코드를 자동으로 수정해주는 codemod도 출시될 예정이며, 향후 버전에서는 forwardRef가 제거될 계획입니다.
기존 프로젝트를 React 19로 바로 업그레이드해도 되나요?
본문에서는 React가 하위 호환성을 잘 보장하므로 출시 직후 모든 변경사항을 즉시 반영할 필요는 없다고 설명합니다. 새로운 기능들을 미리 숙지해두고 천천히 적용하는 것을 권장하고 있습니다.