React Native (구 아키텍처)의 성능 한계
-
React Native 구 아키텍처는 JavaScript 로직과 네이티브 UI 간의 통신을 위해 ‘브릿지’를 사용했습니다.
-
메시지는 직렬화(JSON 등)되어 브릿지를 통해 비동기적으로 전달되었으며, 이는 지연과 오버헤드를 발생시켰습니다.
-
직렬화 비용, 비동기 통신, 메시지 배치 처리, 그리고 스레드 간 동기화 문제로 인해 UI가 복잡한 앱에서 애니메이션 끊김이나 성능 저하가 발생했습니다.
Flutter의 성능 우위
-
Flutter는 Dart 코드를 네이티브 머신 코드로 컴파일하고, Flutter Engine(C++)과 GPU 최적화 렌더링 엔진(Impeller)을 통해 모든 픽셀을 직접 그립니다.
-
플랫폼 네이티브 UI 컴포넌트에 의존하지 않으며, 브릿지 통신 없이 단일 렌더링 파이프라인으로 직접 GPU에 접근하여 60fps 이상의 부드러운 렌더링을 보장합니다.
-
이는 일관된 프레임 속도, 부드러운 애니메이션, 그리고 크로스 플랫폼 전반의 균일한 UI 동작을 가능하게 했습니다.
React Native의 새로운 아키텍처
-
JSI (JavaScript Interface): JavaScript와 네이티브 객체 간의 직접적인 접근을 제공하여 직렬화/역직렬화 과정 없이 함수와 데이터를 직접 호출합니다. 이는 지연 시간을 대폭 줄여 네이티브에 가까운 속도를 구현합니다.
-
TurboModules: 네이티브 모듈을 필요할 때만 로드하는 지연 로딩 방식을 도입하여 앱 시작 시간을 단축하고 메모리 사용량을 절감합니다. JSI를 통해 직접 접근 가능합니다.
-
Fabric Renderer: 기존 브릿지를 통한 JSON 직렬화/역직렬화 대신, JavaScript와 네이티브가 JSI를 통해 동일한 인메모리 섀도우 트리에 직접 접근하도록 합니다. 이는 UI 업데이트를 더욱 부드럽게 하고 프레임 드롭을 줄입니다.
-
Codegen: 빌드 시점에 네이티브 바인딩을 위한 상용구 코드를 자동으로 생성하여, JavaScript와 네이티브 간의 타입 안전한 통신을 보장하고 개발 오류를 줄입니다.
현재 성능 비교
-
여전히 Flutter는 모든 픽셀을 제어하고 네이티브 위젯을 완전히 우회하므로 순수 GPU 렌더링에서 강점을 가집니다.
-
하지만 React Native의 새로운 아키텍처는 Fabric 및 TurboModules 덕분에 낮은 지연 시간, 향상된 메모리 효율성, 부드러운 UI 업데이트를 통해 거의 네이티브에 가까운 성능을 제공합니다.
-
복잡한 맞춤형 그래픽/애니메이션에는 Flutter가, 네이티브 통합 및 플랫폼별 기능에는 React Native가 강력한 경쟁력을 보입니다.