📌 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를 참조하여 작성된 글입니다.