프롤로그
React 환경에서 개발하는 개발자들에게 좋은 소식이 있습니다. useMemo, useCallback에 대해서 다들 잘 아시죠!?
useMemo나 useCallback 같은 React Hook은 렌더링 사이의 계산 결과를 캐시하여 성능을 향상시키는 기능인데요. 아직은 이 기능은 수동으로 개발자가 추가해야 합니다.
심지어 연산이 효율적일지 아닐지 따져가면서 사용해야 했습니다. 개인적으로 사용하기 정말 어려운 기능이라고 생각하는데요. React Compiler가 자동으로 해줄 예정입니다!
React Labs에서 발표한 바로는 이미 Instagram에는 전반적으로 프로덕션 배포가 되어있다고 합니다. React 18에서 발표된 Server Component마저도 아직 실험적 기능으로 나오는데 말이죠.
이 말은 즉 슨 아직 오픈 소스로 발표되진 않았지만 릴리즈되면 바로 활용 가능 한 수준이 될 것으로 보입니다. 24년도 말까지는 useMemo를 포함한 API가 절대 필요하지 않을 것이라고 발표했기 때문에 19버전 릴리즈는 이번 년도 내로 볼 수 있지 않을까요? 🙂
React Compiler를 제외한 다른 React 19의 변화점 도 궁금하니 알아보겠습니다.
React 19 변화점
-
forwardRef가 사라집니다.
기존 forwardRef는 부모 컴포넌트로부터 받은 'ref'를 자식 컴포넌트에 전달할 수 있게 해주는 기능이었습니다. React 19는 'ref'가 일반적인 props처럼 취급되어 별도의 'forwardRef'를 사용 없이 전달할 수 있습니다. (사실 이때까지 왜 안된건지가 더 궁금하네요)
앞으로 개발자는 'ref'를 좀 더 직관적으로 관리할 수 있게 됩니다.
-
React.lazy는 RSC(React-Suspense-Component), promise-as-child로 대체됩니다.
-
새로운 Hook들이 추가됩니다.
- use(Promise)
- use(Context)
- useFormState
- useFormStatus
- useOptimistic
놀랍게도 기존
useHook들은 if와 같은 조건부 내에서 사용할 수 없었지만, 위에서 제시되는 **use(Promise, Context)**는 사용할 수 있습니다. 또한, Suspense와 활용하여 Tanstack Query와 같이 비동기 데이터를 효율적으로 관리할 수 있습니다.이 외에도 form을 관리하기 위한 유용한 Hook이 추가되거나 UI를 낙관적으로 업데이트하는 기능을 추가하여 사용자 경험을 향상시킬 수 있는 토대도 제공합니다. UI를 낙관적으로 업데이트한다는 것은 예를 들어 장바구니에 AJAX 호출이 완료되기 전에 미리 항목이 추가된 장바구니를 화면 상에 표시해주는 것과 같은 행동입니다.
점점 더 똑똑해져 가는 프레임워크 덕분에 개발이 점점 쉬워지네요. 감사합니다 Meta :)
마무리
아마도 다가올 React 19는 지금까지의 React 생태계에서 중요한 렌더링, 사용자 경험 개선 그리고 개발자가 더 효율적으로 개발할 수 있는 환경을 마련하는 업데이트가 주된 요소로 보입니다.
계속해서 기존과 다르게 '변화'하는 기능만 생긴다면 사용하는 개발자로서도 적응을 위해 학습이 필요할 텐데, 전반적으로 다가올 React 19는 사용자 친화적인 요소가 많아 기대되는 부분이 많습니다.
작성 내용이 도움되었으면 좋겠습니다. 개발자분들 모두 화이팅입니다!
Reference.
👉🏻 Understanding Idiomatic React – Joe Savona, Mofei Zhang, React Advanced 2023