Rosetta Page

[번역] Fabric · React Native

I
itjustbong

iOS & Android•2025.12.29

원문: https://reactnative.dev/architecture/fabric-renderer

Fabric은 React Native의 새로운 렌더링 시스템으로, 기존 레거시 렌더링 시스템의 개념적 진화입니다. 핵심 원칙은 더 많은 렌더링 로직을 C++로 통합하고, 호스트 플랫폼(Host platforms)과의 상호운용성을 개선하며, React Native의 새로운 기능을 잠금 해제하는 것입니다. 개발은 2018년에 시작되었으며, 2021년부터 Facebook 앱의 React Native는 이 새로운 렌더러를 기반으로 구동되고 있습니다.
이 문서는 새로운 렌더러(New renderer)와 그 개념에 대한 개요를 제공합니다. 플랫폼별 세부 사항은 피하고 코드 스니펫이나 포인터는 포함하지 않습니다. 이 문서는 핵심 개념, 동기, 이점, 그리고 다양한 시나리오에서의 렌더 파이프라인 개요를 다룹니다.

새로운 렌더러의 동기 및 이점

이 렌더링 아키텍처는 레거시 아키텍처에서는 불가능했던 더 나은 사용자 경험을 실현하기 위해 만들어졌습니다. 몇 가지 예시는 다음과 같습니다:
  • 호스트 뷰(Host views)와 React 뷰 사이의 상호운용성이 개선됨에 따라, 렌더러는 React 서피스(Surfaces)를 동기적으로 측정하고 렌더링할 수 있습니다. 레거시 아키텍처에서 React Native 레이아웃은 비동기적이었으며, 이로 인해 호스트 뷰에 React Native로 렌더링된 뷰를 삽입할 때 레이아웃이 "튀는(jump)" 문제가 발생했습니다.
  • 다중 우선순위(Multi-priority) 및 동기 이벤트 지원을 통해, 렌더러는 특정 사용자 상호작용의 우선순위를 정하여 적시에 처리되도록 보장할 수 있습니다.
  • React Suspense와의 통합을 통해 React 앱에서 데이터 페칭(Data fetching)을 더욱 직관적으로 설계할 수 있습니다.
  • React Native를 위한 서버 사이드 렌더링(Server side rendering) 구현이 더 쉬워집니다.
새로운 아키텍처는 코드 품질, 성능 및 확장성 측면에서도 이점을 제공합니다:
  • 타입 안전성(Type safety): JS와 호스트 플랫폼 간의 타입 안전성을 보장하기 위해 코드 생성(Code generation)을 사용합니다. 코드 생성은 JavaScript 컴포넌트 선언을 단일 진실 공급원(Source of truth)으로 사용하여 props를 담을 C++ 구조체를 생성합니다. JavaScript와 호스트 컴포넌트 props 간의 불일치는 빌드 에러를 유발합니다.
  • 공유 C++ 코어: 렌더러는 C++로 구현되었으며 코어는 플랫폼 간에 공유됩니다. 이는 일관성을 높이고 새로운 플랫폼에서 React Native를 채택하기 쉽게 만듭니다.
  • 더 나은 호스트 플랫폼 상호운용성: 동기적이고 스레드 안전한(Thread-safe) 레이아웃 계산은 호스트 컴포넌트를 React Native에 삽입할 때 사용자 경험을 개선하며, 이는 동기 API를 요구하는 호스트 플랫폼 프레임워크와의 통합이 더 쉬워짐을 의미합니다.
  • 성능 향상: 렌더러 시스템의 새로운 크로스 플랫폼 구현을 통해, 모든 플랫폼은 특정 플랫폼의 한계로 인해 동기 부여된 성능 개선의 혜택을 입게 됩니다. 예를 들어, 뷰 플래트닝(View flattening)은 원래 Android를 위한 성능 솔루션이었으나 이제 Android와 iOS 모두에서 기본적으로 제공됩니다.
  • 일관성: 새로운 렌더 시스템은 크로스 플랫폼이므로, 서로 다른 플랫폼 간의 일관성을 유지하기가 더 쉽습니다.
  • 더 빠른 시작(Startup): 호스트 컴포넌트는 기본적으로 지연 초기화(Lazy initialized)됩니다.
  • JS와 호스트 플랫폼 간의 데이터 직렬화 감소: 이전의 React는 JavaScript와 호스트 플랫폼 사이에서 데이터를 직렬화된 JSON으로 전달했습니다. 새로운 렌더러는 JavaScript 인터페이스(JavaScript Interfaces, JSI)를 사용하여 JavaScript 값에 직접 접근함으로써 데이터 전달 방식을 개선합니다.
0
7

댓글

?

아직 댓글이 없습니다.

첫 번째 댓글을 작성해보세요!

itjustbong님의 다른 글

더보기
[번역] 2025년 구글의 가장 중요한 60가지 AI 발표

[번역] 2025년 구글의 가장 중요한 60가지 AI 발표

itjustbong • AI & ML-ops

0
0
2
면접 준비를 위한 원스톱 가이드

면접 준비를 위한 원스톱 가이드

itjustbong • Career

1
0
16