[React-Native]리액트 네이티브 Fabric
Fabric
패브릭은 리액트 네이티브의 새로운 렌더링 시스템으로, 레거시 렌더 시스템의 개념적 진화입니다.
핵심 원칙은 C++에서 더 많은 렌더 로직을 통합하고 호스트 플랫폼과의 상호 운용성을 개선하며 React Native의 새로운 기능을 해제하는 것입니다.
개발은 2018년에 시작되었으며 2021년에 페이스북 앱의 리액트 네이티브는 새로운 렌더러에 의해 지원됩니다.
Fabric의 모티브와 이점
렌더 아키텍처는 레거시 아키텍처에서는 가능하지 않았던 더 나은 사용자 경험을 실현하기 위해 개발되었습니다. 몇 가지 예는 다음과 같습니다.
호스트 뷰와 React 뷰 간의 상호 운용성이 개선되어 렌더러는 React 표면을 동기적으로 측정하고 렌더링할 수 있습니다. 레거시 아키텍처에서 React Native 레이아웃은 비동기적이어서 호스트 뷰에 React Native 렌더링된 뷰를 내장할 때 레이아웃 "점프" 문제가 발생했었습니다.
다중 우선 순위 및 동기식 이벤트를 지원하므로 렌더러는 특정 사용자 상호 작용의 우선 순위를 지정하여 적시에 처리되도록 할 수 있습니다.
React Suspension과의 통합으로 React 앱에서 데이터 가져오기를 보다 직관적으로 설계할 수 있습니다.
React Native에서 React Concurrent Features를 활성화합니다.
React Native에 대한 서버 측 렌더링을 구현하기가 더 쉽습니다.
새로운 아키텍처는 코드 품질, 성능 및 확장성에서도 이점을 제공합니다.
Type safety : JS 및 호스트 플랫폼에서 유형 안전을 보장하기 위한 코드 생성. 코드 생성은 자바스크립트 컴포넌트 선언을 진실의 소스로 사용하여 C++ 구조체를 생성하여 소품을 보관한다. JavaScript와 호스트 구성 요소 소품이 일치하지 않으면 빌드 오류가 트리거됩니다.
Shared C++ core: 렌더러는 C++로 구현되며 코어는 플랫폼 간에 공유됩니다. 따라서 일관성이 향상되고 새로운 플랫폼에서 React Native를 쉽게 채택할 수 있습니다.
향상된 호스트 플랫폼 상호 운용성: 동기식 및 스레드 안전 레이아웃 계산은 호스트 구성 요소를 React Native에 내장할 때 사용자 경험을 향상시키며, 이는 동기식 API가 필요한 호스트 플랫폼 프레임워크와 쉽게 통합된다는 것을 의미한다.
향상된 성능: 렌더러 시스템의 새로운 교차 플랫폼 구현으로, 모든 플랫폼은 한 플랫폼의 한계로 인해 동기 부여되었을 수 있는 성능 향상으로부터 이익을 얻는다. 예를 들어 view flattening은 원래 안드로이드용 성능 솔루션이었으며 현재는 안드로이드와 iOS 모두에서 기본적으로 제공된다.
일관성: 새로운 렌더 시스템은 교차 플랫폼이므로 서로 다른 플랫폼 간의 일관성을 유지하기가 더 쉽습니다.
더 빠른 시작: 호스트 구성 요소는 기본적으로 느리게(lazily) 초기화됩니다.
JS와 호스트 플랫폼 간의 데이터 직렬화 감소: JavaScript와 호스트 플랫폼 간에 데이터를 직렬화된 JSON으로 전송하는 데 사용되는 반응입니다. 새로운 렌더러는 JSI(JavaScript Interfaces)를 사용하여 직접 JavaScript 값에 액세스하여 데이터 전송을 개선합니다.