React Native와 Flutter의 브릿지 방식 비교

크로스플랫폼 앱 개발이 보편화되면서 React Native와 Flutter는 가장 인기 있는 프레임워크가 되었습니다. 이 글에서는 두 프레임워크가 네이티브 플랫폼과 소통하는 방식, 즉 브릿지 구조의 차이를 간략하고 이해하기 쉽게 설명합니다.

1. React Native의 브릿지 구조

특징

• JavaScript(JS) 코드와 네이티브(Android/iOS) 코드가 별도의 스레드에서 동작합니다.
• JS 코드와 네이티브 코드는 브릿지라는 비동기 메시지 큐를 통해 JSON 메시지를 주고받습니다.
• 브릿지 통신은 비동기적으로 이루어지며, 호출 요청은 큐에 쌓여 순차적으로 처리됩니다.

장점

• 네이티브 코드와 분리된 상태로 JS 코드를 자유롭게 개발할 수 있어 생산성이 높습니다.
• JS 코드 변경 시 앱 전체를 재빌드하지 않고도 빠르게 수정사항을 적용할 수 있습니다.

단점

• 브릿지를 통한 비동기 통신 과정에서 성능 저하가 발생할 수 있습니다.
• UI가 많거나 복잡한 작업을 빈번히 요청하면 병목 현상이 발생할 수 있습니다.

최근 개선 사항

• TurboModules, Fabric UI Manager 등 새로운 아키텍처로 브릿지의 한계를 개선하고 성능을 높이고 있습니다.

---

2. Flutter의 브릿지 구조

특징

• Flutter는 Dart 언어로 개발되며, 네이티브 코드와의 통신을 위해 Platform Channels라는 방식을 사용합니다.
• Dart와 네이티브 간 메시지 패싱 방식으로 비동기 통신합니다.
• Flutter의 UI 렌더링은 네이티브 컴포넌트를 사용하지 않고, 자체 렌더링 엔진(Skia)을 통해 직접 그립니다.

장점

• UI가 네이티브와 독립적이므로 브릿지 병목 현상이 적습니다.
• Flutter의 렌더링 성능이 뛰어나 UI 업데이트가 빠르게 이루어집니다.

단점

• 네이티브 기능 호출 시 메시지 패싱 오버헤드가 존재합니다.
• 네이티브 코드 변경 시마다 별도의 앱 빌드가 필요합니다.

---

요약 비교

구분	React Native	Flutter
사용 언어	JavaScript	Dart
통신 방식	JS ↔ 네이티브 브릿지(비동기 메시지 큐)	Dart ↔ 네이티브 Platform Channels(비동기 메시지)
UI 렌더링 방식	네이티브 UI 컴포넌트 사용	Flutter 엔진(Skia)을 이용한 직접 렌더링
브릿지 성능 영향	UI 업데이트 빈도에 따라 성능 저하 가능성 높음	UI 렌더링은 빠름, 네이티브 호출 시에만 오버헤드
최신 동향	TurboModules, Fabric 도입 등 성능 개선 중	Platform Channels 유지하며 최적화 지속

---

오늘 작성하게된 글은 업무하며 react-native 개발자로써 자주 마주하게되는 내용이지만 정리되지 않는 부분들을 정리해 나가기 위해 포스팅 하였습니다.