(번역) React Labs: 우리가 작업 중인것 – 2022년 6월

2022년 6월 15일, Andrew Clark, Dan Abramov, Jan Kassens, Joseph Savona, Josh Story, Lauren Tan, Luna Ruan, Mengdi Chen, Rick Hanlon, Robert Zhang, Sathya Gunasekaran, Sebastian Markbåge, 그리고 Xuan Huang 씀

원문: https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html

React 18은 수년에 걸쳐 제작되었으며, React 팀에 귀중한 교훈을 가져다줬습니다. React 18의 출시는 수년간의 연구와 수많은 길을 탐구해 이뤄진 결과였습니다. 그 길 중 일부는 성공적이었습니다. 그러나 많은 경우에는 막다른 골목(비록 새로운 인사이트를 주긴 했지만)이었습니다. 우리가 배운 교훈은 커뮤니티가 우리가 무엇을 탐구 중인지 모르는 채로 새로운 기능을 기다리는 것을 답답해한다는 것입니다.

우리는 보통 실험적인 것부터 명확하게 정의된 것에 이르기까지 늘 많은 프로젝트를 진행하고 있습니다. 앞으로 우리는 이러한 프로젝트들의 작업 내용을 정기적으로 커뮤니티에 공유하고자 합니다.

명확히 하자면, 이건 명확한 타임라인이 정해진 로드맵은 아닙니다. 프로젝트 중 많은 것들이 현재 활발히 연구 중인 상태이기 때문에 구체적인 출시 일정을 정하기 어렵습니다. 이런 프로젝트들은 우리가 배우는 것에 따라 현재와 같은 모습으로 출시되지 않을 수도 있습니다. 대신 우리가 활발히 생각하고 있는 문제 영역과 지금까지 배운 내용을 여러분들과 공유하고 싶습니다.

서버 컴포넌트(Server Components)

우리는 2020년 12월에 React 서버 컴포넌트(React Server Components, RSC)의 실험적인 데모를 발표했습니다. 그 이후 우리는 React 18의 의존성을 마무리하고 실험적인 피드백에서 영감을 받은 변경 사항을 연구하고 있습니다.

좀 더 자세히 말씀드리면, 우리는 더 나은 호환성을 위해 I/O 라이브러리(예: react-fetch)를 포크 한다는 생각을 버리고 async/await 모델을 채택하기로 했습니다. 데이터 페치를 위해 라우터를 사용할 수도 있기 때문에 기술적으로 RSC의 출시를 막지 않습니다. 또 다른 변화는 경계를 파일 확장자로 표시하는 방식에서 벗어나 어노테이션 경계로 작성하게 된 것입니다.

우리는 Webpack과 Vite에서 모두 의미 있게 공유될 수 있도록 번들러 지원을 통합하기 위해 Vercel 그리고 Shopify와 협력하고 있습니다. 출시 전 RSC의 의미가 전체 React 생태계에서 동일한지 확인하고 싶습니다. 이것은 새 기능이 안정적인 상태에 도달하는 것을 가로막는 주요한 걸림돌입니다.

에셋 로딩(Asset Loading)

현재 스크립트, 외부 스타일, 글꼴 그리고 이미지와 같은 에셋들은 일반적으로 외부 시스템에 의해 프리 로드(preloaded)되고 로드(loaded) 됩니다. 이는 스트리밍, 서버 컴포넌트 등과 같은 새로운 환경에서 이를 조정하기 까다롭게 만듭니다. 우리는 중복된 외부 에셋을 프리로드 및 로드하기 위한 모든 React 환경에서 동작하는 새로운 API를 React API에 추가하는 방안을 검토하고 있습니다.

또한 우리는 이러한 지원으로 Suspense가 이미지, CSS 및 글꼴이 로드될 때까지 표시되는 것을 막지만 스트리밍 및 동시 렌더링을 차단하지는 않도록 할 수 있을지 살펴보고 있습니다. 이는 비주얼 팝(Visuals pop)과 레이아웃 시프트(layout shifts)에 의해 발생하는 "팝코닝(popcorning)"을 피하는데 도움을 줄 수 있습니다.

정적 서버 렌더링 최적화(Static Server Rendering Optimizations)

정적 사이트 생성(Static Site Generation, SSG) 및 증분 정적 재생성(Incremental Static Regeneration, ISR)은 캐시 가능한 페이지의 성능을 확보하기 좋은 방법입니다. 하지만 동적 서버 사이드 렌더링(Server Side Rendering, SSR)의 모두는 아니지만 대부분의 콘텐츠를 캐시 할 수 있는 경우 성능 향상을 위한 기능을 추가할 수 있다고 생각합니다. 우리는 컴파일 및 정적 패스(static passes)를 사용해 서버 렌더링을 최적화할 수 있는 방법을 모색하고 있습니다.

React 최적화 컴파일러(React Optimizing Compiler)

우리는 React Conf 2021에서 React Forget의 초기 프리뷰를 제공했습니다. React의 프로그래밍 모델을 유지하면서 리렌더링 비용을 최소화하기 위해 useMemo 및 useCallback을 호출과 동일한 것을 자동으로 생성하는 컴파일러입니다.

최근 우리는 컴파일러를 더 안정적이고 기능적으로 만들기 위한 재작성을 마쳤습니다. 이 새로운 아키텍처를 통해 우리는 로컬 뮤테이션(local mutation)의 사용과 같은 복잡한 패턴을 분석하고 메모할 수 있으며 메모이제이션 훅과 동등한 수준을 넘어 많은 컴파일 시점 최적화 기회를 열어줍니다.

또한 우리는 컴파일러의 여러 측면을 탐구하기 위한 플레이그라운드를 만들고 있습니다. 플레이그라운드의 목표는 컴파일러 개발을 보다 쉽게 만드는 것이고, 우리는 컴파일러를 직접 사용해 보고 컴파일러의 기능을 직관적으로 이해할 수 있게 될 것입니다. 내부 동작에 대한 다양한 인사이트를 보여주고 입력할 때 컴파일러의 출력을 실시간으로 렌더링 해 보여줍니다. 이것은 출시될 때 컴파일러와 함께 제공됩니다.

오프스크린(Offscreen)

오늘날 컴포넌트를 숨기고 표시하려면 두 가지 옵션이 있습니다. 하나는 트리에 완전히 추가하거나 제거하는 것입니다. 이 방법의 문제점은 마운트를 해제할 때마다 스크롤 위치와 같은 DOM에 저장된 상태를 포함한 UI 상태가 유실된다는 것입니다.

다른 방법은 구성 요소를 마운트 된 상태로 유지하고 CSS를 사용해 시각적으로 표시되는 것을 전환하는 것입니다. 이 경우 UI의 상태는 유지되지만, React는 새 업데이트를 받을 때마다 숨겨진 컴포넌트와 해당 컴포넌트의 모든 하위 컴포넌트를 계속 렌더링 해야하므로 성능 비용이 발생합니다.

오프스크린은 세 번째 방법을 제시합니다. UI를 시각적으로 숨기고, 콘텐츠의 우선순위를 낮춥니다. 이 아이디어는 content-visibility CSS 속성과 유사한 개념입니다. 콘텐츠가 숨겨져 있으면 나머지 UI와 동기화 상태를 유지할 필요가 없습니다. React는 앱의 나머지 부분이 유휴 상태가 될 때까지 또는 콘텐츠가 다시 표시될 때까지 렌더링 작업을 연기할 수 있습니다.

오프스크린은 높은 수준의 기능을 잠금 해제하는 낮은 수준의 기능입니다. startTransition과 같은 React의 다른 동시성(concurrent) 기능과 유사하게 대부분의 경우 오프스크린 API와 직접 상호작용하지 않고 고유한(opinionated) 프레임워크를 사용해 다음과 같은 패턴들을 구현합니다.

• 즉각적인 트랜지션(Instant transitions). 일부 라우팅 프레임워크는 탐색 속도를 높이기 위해 링크 위로 마우스를 가져갈 때 이미 데이터를 미리 가져오고 있습니다. 오프스크린을 사용하면 백그라운드에서 다음 화면을 미리 렌더링 할 수도 있습니다.
• 재사용 가능한 상태(Reusable state). 마찬가지로 경로 또는 탭 사이를 이동할 때 오프스크린을 사용해 이전 화면의 상태를 보존할 수 있으므로 다시 이전 화면으로 돌아갔을 때 중단한 지점부터 다시 볼 수 있습니다.
• 가상 리스트 렌더링. 큰 리스트의 항목들을 표시할 때 가상 리스트 프레임워크는 현재 표시된 것보다 더 많은 행을 미리 렌더링 합니다. 오프스크린을 사용해 숨겨진 행을 표시되는 항목보다 낮은 우선순위로 미리 렌더링 할 수 있습니다.
• 백그라운드 콘텐츠. 또한 우리는 모달 오버레이를 표시할 때처럼 숨기지 않고 백그라운드에서 콘텐츠의 우선순위를 낮추기 위한 기능들도 살펴보고 있습니다.

트랜지션 추적(Transition Tracing)

현재 React에는 두 가지 프로파일링 도구가 있습니다. 기존 프로파일러는 프로파일링 세션의 모든 커밋에 대한 개요를 보여줍니다. 각 커밋에 대해 렌더링 된 모든 컴포넌트와 렌더링에 걸린 시간도 표시됩니다. 또한 React 18에 도입되어 컴포넌트가 업데이트를 예약하고 React가 이러한 업데이트를 수행하는 시기를 보여주는 타임라인 프로파일러(Timeline Profiler)의 베타버전이 있습니다. 이 두 프로파일러는 개발자가 코드에서 성능 문제를 식별하는데 도움이 됩니다.

우리는 개발자가 각각의 느린 커밋이나 컴포넌트에 대해 아는 것이 썩 유용하지 않다는 것을 깨달았습니다. 느린 커밋의 실질적인 원인을 파악하는 것이 더 유용합니다. 그리고 개발자는 특정 상호작용(예: 버튼 클릭, 초기 로드 또는 페이지 탐색)을 추적해 성능 회귀를 관찰하고 상호 작용이 느린 이유와 해결 방법을 이해할 수 있길 원합니다.

이전에는 상호 작용 추적(Interaction Tracing) API를 만들어 이 문제를 해결하려고 했지만 이는 상호작용이 느린 원인을 추적하는 정확성을 떨어드리고 때때로 상호작용이 끝나지 않는 근본적인 설계 결함이 있었습니다. 우리는 이런 문제들로 인해 이 API를 제거하게 되었습니다.

우리는 이러한 문제를 해결하는 상호 작용 추적 API(startTransition을 통해 시작되기 때문에 잠정적으로 트랜지션 추적이라고 함)의 새 버전을 개발 중입니다.

새로운 React 문서(New React Docs)

작년에 우리는 새로운 React 문서 웹 사이트의 베타 버전을 발표했습니다. 새로운 학습 자료는 훅(Hooks)을 먼저 가르치고 새로운 다이어그램, 일러스트레이션, 많은 대화형 예제 및 과제가 있습니다. 우리는 React 18 출시에 집중하기 위해 작업을 잠시 중단했지만, 이제 React 18이 출시되었으므로 새로운 문서를 완성하고 제공하기 위해 적극적으로 노력하고 있습니다.

우리는 현재 이펙트(effects)에 대한 자세한 섹션을 작성하고 있습니다. 이 섹션은 새로운 React 사용자와 숙련된 사용자 모두에게 어려운 주제 중 하나라고 들었습니다. 이펙트를 이용한 동기화(Synchronizing with Effects)는 시리즈의 첫 번째 페이지이며 더 많은 페이지가 제공될 예정입니다. 이펙트에 대한 자세한 섹션을 처음 작성하기 시작했을 때 React에 새로운 기본 요소를 추가해 일반적인 이펙트 패턴을 단순화할 수 있다는 것을 깨달았습니다. useEvent RFC에서 이에 대한 몇 가지 초기 생각을 공유했습니다. 현재 초기 연구 단계에 있으며 여전히 그 아이디어를 이어가고 있습니다. 지금까지 RFC에 대한 커뮤니티의 의견과 지속적인 문서 재작성을 위한 피드백 및 기여에 감사드립니다. 특히 새로운 웹사이트 구현에 대한 많은 개선 사항을 제출하고 검토해 주신 Harish Kumar께 감사드립니다.

이 글을 검토해 주신 Sophie Alpert께 감사드립니다.

🚀 한국어로 된 프런트엔드 아티클을 빠르게 받아보고 싶다면 Korean FE Article(https://kofearticle.substack.com/)을 구독해주세요!