React Labs: What We've Been Working On - March 2023 - React
React
React 프로젝트 내부에서 연구 개발 중인 프로젝트를 정리한 글인데 앞으로 React가 어떤 기능을 추가할지 어떤 방향으로 갈지 파악하는데 도움이 됩니다.
React Server Components(RSC)
새로운 애플리케이션 아키텍처입니다. 미리 실행되기 때문에 번들에서 제외할 수 있고 서버에서 실행되므로 데이터 계층에도 직접 접근할 수 있어서 서버 중심 앱과 클라이언트 중심 앱의 장점을 모두 제공할 수 있습니다. 데이터를 가져올 때 async/await를 기본으로 도입해서 이부분은 해결되었지만 아직 클라이언트에서 서버로 데이터를 보내는 방법을 찾는 중이고 번들러가 RSC를 지원해야 하기 때문에 번들러 개발자와도 협업을 하고 있습니다.
Asset Loading
Suspense가 도입되었지만 CSS나 폰트, 이미지의 로딩은 여전히 별도로 진행됩니다. 그래서 이 로딩 상태에 따라 레이아웃 변경이 발생할 수 있기 때문에 이러한 에셋의 생명주기를 Suspense와 완전히 통합해서 콘텐츠를 표시할 시기를 React가 결정할 수 있도록 작업 중에 있습니다. 추가로 에셋을 미리 로딩하는 방법도 준비하고 있습니다.
Document Metadata
웹사이트의 <title>이나 여러 메타데이터는 <head>에 들어가야 하지만 페이지마다 다를 수 있기 때문에 특별한 처리가 필요합니다. 보통 유지 관리를 용이하게 하기 위해 화면 컴포넌트에 가깝게 두는 것이 좋지만 <head>에 넣어야 하기 때문에 앱의 최상위 컴포넌트에 있어야 합니다. 이를 해결하기 위해 서드파트 컴포넌트를 사용해서 메타데이터를 <head>로 이동시키거나 서버에서 렌더링해서 내려주는 방식을 사용합니다. 하지만 둘다 단점이 있기 때문에 컴포넌트 트리 어디서나 메타데이터를 렌더링할 수 있는 기능을 준비하고 있고 이 기능은 클라이언ㅌ, SSR, RSC 모두에서 똑같이 동작하게 하려고 준비하고 있습니다.
React Optimizing Compiler
이전에 React 최적화 컴파일러인 React Forget을 공개했습니다. 당시에 이를 자동 memoizing 컴파일러라고 불렀으나 지금와서 보니 자동 reactivity 컴파일러라고 부르는 것이 더 이해하기 좋다고 생각합니다. React는 상태가 바뀌면 랜더링이 발생하므로 반응성에 따라서 너무 많은 랜더링이 다시 발생할 수 있는데 이 컴파일러는 memoization 처리를 알아서 해주어서 너무 많은 랜더링이 발생하지 않도록 최적화 해주고 사용자가 직접 할 필요가 없습니다.
작년부터 대대적인 리팩토링을 하면서 Meta 내에서 이미 프로덕션에서 사용중이라고 합니다. 성능이 입증되면 오픈소스로 공개할 예정입니다. 컴파일러는 이데 Babel에서 거의 분리되긴 했지만 공용 인터페이스는 여전히 Babel과 다른 빌드 시스템 플러그인을 통해 이뤄질 것이라고 합니다.
Offscreen Rendering
추가적인 오버헤드 없이 백그라운드에서 화면을 렌더링하는 기능입니다. 개발자 대부분이 오프스크린 API를 직접 사용할 일은 없을 것이고 보통은 라우터나 UI 라이브러리가 이 API를 통합해서 추가 작업 없이도 오프스크린 렌더링의 혜택을 볼 수 있을 것입니다. 이는 컴포넌트 작성 방식을 바꾸지 않고도 오프스크린 렌더링을 할 수 있어야 합니다. Meta 내부에서 실험을 했는데 꽤 긍정적인 성능 결과를 얻었기 때문에 올해 말에는 실험적인 API와 RFC를 공개할 예정이라고 합니다.
Transition Tracing
React의 트랜지션이 느리지는 시점을 감지하고 원인을 조사할 수 있는 APIfh 초기 설계는 완료했고 RFC도 공개했지만 프로젝트는 보류 중입니다.
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 4월 9일 오전 2:29