React Native - Fabric Renderer

Posted on | 0 comments

Fabric

React Native의 새로운 렌더링 시스템, Fabric

Fabric은 렌더 로직을 C++로 통합하고 Host Platform과의 상호 운용성을 개선하며 새로운 기능 제공을 목표로 한다. 향상된 사용자 경험을 제공하도록 하고, 이를 위해서는 동기 렌더링, 멀티 우선순위 이벤트, React Suspense 통합 등을 지원한다. 타입 안정성, C코어를 공유, 호스트 플랫폼과의 상호 운영성 개선, 성능 향상, 일관성 유지 등의 특징을 가진다.

Fabric은 RN앱의 렌더링 성능과 개발 효율성을 높이는데 기여한다.

새로운 렌더 아키텍처의 개선점

  • 더 나은 사용자 경험
  • 렌더링이 동기적으로 이루어진다. (이전 아키텍처의 경우 RN 레이아웃이 비동기적이라 레이아웃 점프 문제가 있었음)
  • 멀티 우선순위 및 동기 이벤트 지원으로 인해 우선순위를 정하고 적시에 처리할 수 있게 되었다.
  • React Suspense 통합으로 Reactive 앱에서 데이터 페칭을 직관적으로 설계가 가능하게 되었다.

RN의 새로운 아키텍처의 장점

  • React의 concurrent 기능을 RN에서 사용할 수 있도록 활성화된다.
  • RN에서 서버 사이드 렌더링 구현이 더 간편해진다.
  • 코드 품질, 성능 및 확장성
  • 타입 안정성 보장하는 코드 생성, JS 컴포넌트 선언을 기본으로 C++ 구조체를 생성
  • JS와 호스트 컴포넌트 속성 간의 불일치가 있을 경우 빌드 오류가 발생

  • 공유된 C 코어로 렌더러가 C로 구현되고, 여러 플랫폼 간에 코어가 공유되어 일관성이 증가한다.

  • 일관성
  • 빠른 시작 (호스트 컴포넌트는 기본적으로 지연 초기화, 앱의 시작 속도가 빨라진다.)

데이터 전송의 최적화

  • 기존에는 JSON으로 데이터 전송, 새로운 렌더러는 JS 값에 직접 접근한다.
  • JSI를 활용하여 데이터 전송의 효율성을 높인다.

Reference

  • https://reactnative.dev/architecture/fabric-renderer