만베거
newminkyung
React 19

React 19

리액트는 내부에서 실험하고 있는 새로운 기능들을 react-canary (opens in a new tab)로 소개했었는데

최근 리액트 블로그 글에서 이 기능들이 react 19로 릴리즈할 것이라는 내용이 있었습니다 (한 번에 다 추가는 x)

저는 힙생힙사니까 정리해서 공유드립니다

TL;DR

  • 리액트 19에서 추가될 새로운 기능에 대해 소개
  1. 리액트 서버 컴포넌트
  2. asset 로딩 시점 제어할 수 있는 기능 추가
  3. 메타 데이터를 원하는 곳에서 추가할 수 있는 기능 추가
  4. 렌더링 최적화 컴파일러 추가

React Server Components(RSC)

  • 서버에서 미리 실행되기 때문에 번들에서 제외 가능
  • 서버에서 실행되므로 데이터 계층에도 직접 접근 가능
  • 서버 중심 앱과 클라이언트 중심 앱의 장점을 모두 제공할 수 있음
    • use-client, use-server 디렉티브 추가
  • 아직 클라이언트에서 서버로 데이터를 보내는 방법을 찾는 중이고 번들러가 RSC를 지원해야 하기 때문에 번들러 개발자와도 협업 중

Asset Loading

  • AS-IS
    • Suspense가 도입되었지만 CSS나 폰트, 이미지의 로딩은 여전히 별도로 진행됨
    • 로딩 상태에 따라 레이아웃 변경이 발생할 수 있기 때문에 이러한 에셋의 생명주기를 Suspense와 완전히 통합할 예정
  • TO-BE
    • 콘텐츠를 표시할 시기를 React가 결정할 수 있도록 작업 중
    • 추가로 에셋을 미리 로딩하는 방법도 준비 중

Document Metadata

  • AS-IS
    • 웹사이트의 <title>이나 여러 메타데이터는 <head>에 들어가야 하지만 페이지마다 다를 수 있기 때문에 특별한 처리가 필요
    • 보통 유지 관리를 용이하게 하기 위해 화면 컴포넌트에 가깝게 두는 것이 좋지만 <head>에 넣어야 하기 때문에 앱의 최상위 컴포넌트에 위치
    • 이를 해결하기 위해 서드파트 컴포넌트를 사용해서 메타데이터를 <head>로 이동시키거나 서버에서 렌더링해서 내려주는 방식을 사용
  • TO-BE
    • 컴포넌트 트리 어디서나 메타데이터를 렌더링할 수 있는 기능을 준비하고 있고 이 기능은 클라이언트, SSR, RSC 모두에서 똑같이 동작하게 하려고 준비 중

React Optimizing Compiler

  • 이전에 React 최적화 컴파일러인 React Forget을 공개

  • AS-IS

    • React는 상태가 바뀌면 랜더링이 발생하므로 반응성에 따라서 너무 많은 랜더링이 다시 발생할 수 있음
    • 기존에는 불필요한 렌더링을 막기 위해 useMemo, useCallback, memo를 사용
    • 이는 개발자가 직접 작성해주어야하는 불편함이 있고 코드가 점점 복잡해질 수 있음

  • TO-BE

    • 컴파일러가 memoization 처리를 알아서 해주어서 너무 많은 랜더링이 발생하지 않도록 최적화 해주고 사용자가 직접 할 필요가 없음
    • 간단히 말하면 자동으로 메모이제이션 해주는 컴파일러

  • 작년부터 대대적인 리팩토링을 하면서 인스타그램에서 이미 프로덕션에서 사용 중

Object KeysReduce Tbt