Skip to main content

Fabric

Fabric은 React Native의 새로운 렌더링 시스템으로, 기존 렌더링 시스템의 개념적 진화입니다. 핵심 원칙은 더 많은 렌더링 로직을 C++로 통합하고, 호스트 플랫폼과의 상호 운용성을 개선하며, React Native의 새로운 기능을 가능하게 하는 것입니다. 개발은 2018년에 시작되었으며, 2021년에는 Facebook 앱의 React Native가 새로운 렌더러를 기반으로 동작합니다.

이 문서는 새로운 렌더러와 그 개념에 대한 개요를 제공합니다. 플랫폼별 세부 사항은 다루지 않으며, 코드 조각이나 포인터도 포함하지 않습니다. 이 문서는 주요 개념, 동기, 이점, 그리고 다양한 시나리오에서의 렌더링 파이프라인 개요를 다룹니다.

새로운 렌더러의 동기와 이점​

새로운 렌더러 아키텍처는 기존 아키텍처로는 불가능했던 더 나은 사용자 경험을 제공하기 위해 만들어졌습니다. 몇 가지 예시를 살펴보겠습니다:

  • 호스트 뷰와 React 뷰 간의 상호 운용성이 개선되어, 렌더러가 React 표면을 동기적으로 측정하고 렌더링할 수 있습니다. 기존 아키텍처에서는 React Native 레이아웃이 비동기적으로 처리되어, _호스트 뷰_에 React Native 렌더링 뷰를 포함할 때 레이아웃 "점프" 문제가 발생했습니다.
  • 다중 우선순위와 동기 이벤트를 지원함으로써, 렌더러는 특정 사용자 상호작용을 우선 처리하여 적시에 처리되도록 보장합니다.
  • React Suspense와의 통합을 통해 React 앱에서 데이터 페칭을 더 직관적으로 설계할 수 있습니다.
  • React Native에서 React 동시성 기능을 활성화합니다.
  • React Native의 서버 사이드 렌더링 구현이 더 쉬워졌습니다.

새로운 아키텍처는 코드 품질, 성능, 확장성 측면에서도 이점을 제공합니다:

  • 타입 안전성: JS와 호스트 플랫폼 간의 타입 안전성을 보장하기 위해 코드 생성이 사용됩니다. 코드 생성은 JavaScript 컴포넌트 선언을 진리의 원천으로 사용하여 props를 보관할 C++ 구조체를 생성합니다. JavaScript와 호스트 컴포넌트 props 간의 불일치가 발생하면 빌드 오류가 발생합니다.
  • 공유 C++ 코어: 렌더러는 C++로 구현되었으며, 코어는 플랫폼 간에 공유됩니다. 이는 일관성을 높이고 새로운 플랫폼에서 React Native를 더 쉽게 도입할 수 있게 합니다.
  • 더 나은 호스트 플랫폼 상호 운용성: 동기적이고 스레드 안전한 레이아웃 계산은 호스트 컴포넌트를 React Native에 포함할 때 사용자 경험을 개선하며, 동기 API를 요구하는 호스트 플랫폼 프레임워크와의 통합이 더 쉬워집니다.
  • 성능 개선: 새로운 크로스 플랫폼 렌더러 시스템 구현으로, 모든 플랫폼이 한 플랫폼의 제한으로 인해 동기된 성능 개선의 혜택을 받습니다. 예를 들어, 뷰 평탄화는 원래 Android의 성능 솔루션이었지만, 이제 Android와 iOS 모두에서 기본적으로 제공됩니다.
  • 일관성: 새로운 렌더 시스템은 크로스 플랫폼이므로, 다양한 플랫폼 간의 일관성을 유지하기가 더 쉬워졌습니다.
  • 더 빠른 시작: 호스트 컴포넌트는 기본적으로 지연 초기화됩니다.
  • JS와 호스트 플랫폼 간의 데이터 직렬화 감소: React는 이전에 JavaScript와 호스트 플랫폼 간에 데이터를 직렬화된 JSON으로 전송했습니다. 새로운 렌더러는 JavaScript 인터페이스(JSI)를 사용하여 JavaScript 값을 직접 접근함으로써 데이터 전송을 개선합니다.