React Native에서의 Fabric — 그것이 뭐인가, 렌더링 아키텍처 및 작동 방식

Fabric이란?

Fabric은 Shadow Thread와 Bridge를 통해 작동하던 구 렌더러를 대체한 React Native용 새로운 렌더링 시스템입니다. 구 아키텍처에서는 렌더링 프로세스에 세 단계가 있었습니다: JavaScript가 Virtual DOM을 계산하고, Shadow Thread (Yoga)가 레이아웃을 계산하고, Native Thread가 UIView를 그립니다. Fabric은 이 모든 단계를 동기적으로 작동하는 단일 C++ 파이프라인으로 통합합니다.

Fabric 개발은 2019년 Lean Core 이니셔티브와 “The New Architecture” 프로젝트의 일환으로 시작되었습니다. 주요 목적은 비동기 3단계 렌더링과 관련된 성능 문제를 해결하는 것이었습니다. 구 아키텍처에서는 상태 변경마다 서로 다른 스레드를 통한 세 번의 패스가 필요하여 데이터 변경과 UI 렌더링 사이에 지연이 발생했습니다.

Fabric은 불변 Shadow Tree (Immutable Shadow Tree) 개념을 기반으로 합니다. 트리의 각 노드는 props와 상태를 가진 React 컴포넌트를 나타냅니다. 상태가 변경되면 새 트리가 만들어지고, Fabric이 구 트리와 새 트리의 차이를 계산하여 필요한 변경만 네이티브 UI에 적용합니다. 이를 통해 UIView/ViewGroup 작업이 최소화되고 렌더링 시간이 단축됩니다.

Shadow Tree 작동 방식

Shadow Tree는 Fabric 작동의 기초입니다. Shadow Tree가 C++ 측에만 존재하고 비동기 Bridge를 통해 JS 트리와 분리되었던 구 아키텍처와 달리, Fabric은 완전히 동기화된 계층적 UI 표현을 만듭니다. Shadow Tree 노드는 컴포넌트의 props, 상태, 스타일을 저장하고, Yoga는 C++ 레벨에서 직접 레이아웃을 계산합니다.

React 컴포넌트가 상태를 업데이트하면, React Native는 새 Shadow Node를 Fabric으로 보냅니다. Fabric은 전체 UI를 재렌더링하지 않고 — C++ 레벨의 diffing 알고리즘을 사용하여 어떤 노드가 변경되었는지 파악합니다. 변경된 노드만 네이티브 렌더링으로 보냄으로써 작업량이 크게 줄어들니다.

Fabric의 3단계 렌더링

Fabric에서의 렌더링 프로세스는 스레드 전환 없이 C++ 레벨에서 동기적으로 실행되는 세 단계로 구성됩니다. 첫 번째 단계는 Render: React가 컴포넌트의 렌더 함수를 호출하여 React Element Tree를 반환합니다. 둘째 단계는 Commit: React Native가 새 Shadow Tree를 만들고 구 버전에 기초하여 변경사항을 계산합니다. 셉 번째 단계는 Mount: Fabric이 네이티브 UI에 변경사항을 적용하여 UIViews를 생성, 업데이트 문제 없이 합니다.

• Render — JS 스레드에서 실행, React Element Tree 생성.
• Commit — C++ Shadow Tree가 diff 계산 및 변경 목록 생성.
• Mount — 메인 스레드에서 네이티브 UI에 변경사항 적용.

세 단계는 모두 단일 파이프라인으로 작동하며 데이터가 직렬화 없이 JSI를 통해 전달됩니다. 이것이 단계 간에 격차가 있었던 구 아키텍처와의 주요 차이점입니다: JS → (JSON) → Shadow Thread → (레이아웃) → Native Thread.

Fabric vs 구 렌더러: 비교

Fabric과 구 렌더러의 비교는 React Native 아키텍처가 얼마나 큰 변화를 격었는지 보여줍니다. 구 렌더러는 비동기적으로 작동하며 렌더링 프로세스를 세 개의 독립적인 스레드로 나눌습니다. Fabric은 모든 것을 단일 C++ 파이프라인으로 통합합니다.

실제로 Fabric은 UI 업데이트가 잧은 애플리케이션(애니메이션, 뜨는 헤더가 있는 스크롤, 실시간 데이터)에서 특히 유용합니다. 정적인 페이지(텍스트, 버튼)의 경우 차이가 더 작습니다. Meta 벤치마크에 따르면, Fabric은 초기 리스트 렌더링 시간을 40–60% 줄입니다.

JSI와 Fabric: 새로운 통신

JSI (JavaScript Interface)는 Fabric을 가능하게 하는 핵심 컴포넌트입니다. JSI를 통해 Fabric은 직렬화 없이 JavaScript 값에 직접 액세스합니다. React가 Fabric에 props를 전달할 때, JSON을 통해 복사되지 않고 JSI가 JS 엔진 메모리의 데이터를 가리키는 포인터를 전달합니다.

JSI 아키텍처를 통해 Fabric은 어떤 JavaScript 엔진이든(Hermes, JSC, V8) 작동할 수 있습니다. Fabric C++ 코드는 특정 JS 엔진 구현에 의존하지 않으믌로 유지보수와 테스트가 간소합니다. 모든 UI 작업(생성, 업데이트, 삭제)은 JSI를 통해 수행되어 최소 지연을 보장합니다.

// JSI를 통한 Fabric C++ 렌더링 파이프라인
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // JSI를 통한 동기 prop 전달
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Yoga를 통한 직접 레이아웃 계산
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // 네이티브 UI에 변경사항 적용
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

주요 장점은 동기 업데이트입니다. 구 아키텍처에서는 UI가 비동기 큐를 통해 업데이트되었습니다: React가 Bridge를 통해 명령을 보내고, Shadow Thread가 레이아웃을 처리하고, Native Thread가 렌더링했습니다. Fabric에서는 모든 단계가 한 번의 패스로 순차적으로 실행됩니다. 이로써 레이스 컨디션이 제거되고 UI가 애플리케이션의 현재 상태와 일치하도록 보장됩니다.

Fabric으로 마이그레이션

Fabric으로 마이그레이션하려면 React 컴포넌트를 재작성할 필요가 없습니다 — 기존의 모든 React Native 컴포넌트가 계속 작동합니다. 그러나 네이티브 코드(Native Module, 사용자 정의 ViewManager)를 사용하는 라이브러리는 업데이트가 필요할 수 있습니다. Meta는 새 아키텍처를 활성화하기 전에 각 라이브러리의 호환성을 확인할 것을 권장합니다.

React Native 0.76+ 프로젝트에서 Fabric을 활성화하려면 react-native.config.js에서 newArchEnabled: true 플래그를 설정하세요. Fabric은 Turbo Module과 함께 자동으로 활성화됩니다. 문제가 발생하면 애플리케이션 코드 변경 없이 구 렌더러로 돌아가 Fabric을 비활성화할 수 있습니다 — 두 아키텍처 모두 병렬로 지원됩니다.

// package.json — Fabric 호환 라이브러리 확인
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

마이그레이션 시 모든 네이티브 라이브러리를 Fabric과 호환되는 버전으로 업데이트하는 것이 중요합니다. react-native-reanimated과 react-native-gesture-handler와 같은 주요 라이브러리는 이미 새 아키텍처를 지원합니다. 아직 업데이트되지 않은 라이브러리의 경우, Fabric이 호환 메커니즘을 제공하여 라이브러리가 Fabric을 지원하지 않는 경우 렌더러가 자동으로 구 버전으로 홈 백한 들어집니다.