GH.

그동안 가볍게만 접해왔던 React Native 사용을 본격적으로 시작했고, 다양한 관점에서 인사이트를 얻고자 지인 개발자와 함께 세미나를 진행 중이다. 세미나 과정에서 ‘라이브러리와 API 활용법’ 같은 고수준의 주제부터 아키텍처 같은 저수준의 주제까지, React Native에 대한 다양한 이야기가 오갔다. 이 글은 세미나에서 논의된 내용을 정리 없이 가볍게 작성한 글이다.

주제 선정

첫 세미나에는 총 3명의 개발자가 참여했다. 모두 프론트엔드 영역에서 활동하고 있지만, 각자의 성향과 관심사는 조금씩 달랐기에 각자 원하는 주제를 선정하여 발표하기로 했다. 그렇게 선정된 주제는 다음과 같다.

필자:

• React Native의 역사와 생태계, 그리고 커뮤니티 현황
• React Native 개발 환경의 전반적인 맥락
• React Native로 마이크로 프론트엔드 구축하기

A 개발자:

• React Native의 구 아키텍처와 새 아키텍처 비교
• React Native Skia의 개념 및 활용 예제

B 개발자:

• React Native에서 카메라 활용법
• React Native Vision Camera 개요 및 활용 예제

논의한 내용

React Native의 역사와 생태계, 그리고 커뮤니티 현황

세미나에서는 Meta(구 Facebook)의 내부 해커톤에서 시작된 React Native의 탄생 배경부터, 새로운 아키텍처를 도입하게 된 계기, 그리고 React Native 커뮤니티를 활성화하기 위한 여러 노력들에 대해 이야기를 나누었다.

React Native에 대한 명세와 제안들은 주로 React Native Community의 Github에서 논의되는데, 특히 ‘React Native 프레임워크 정의’ 문서가 눈길을 끈다. 이 문서는 서드 파티 오픈소스 개발자들을 위한 가이드라인에 가까워서, React Native가 생태계에 얼마나 관여하는지 구체적으로 파악할 수 있다.

• React Native Community: Discussions And Proposals
• RFC0759: React Native 프레임워크

React Native 생태계에 기여하는 주요 조직으로는 Expo와 Callstack, Software Mansion이 대표적이다. Expo는 최근 Meta의 공식 지원 프레임워크로 자리 잡았으며, Callstack과 Software Mansion은 React Native 생태계에서 주요 라이브러리의 메인테이너 역할을 맡고 있다. 특히 React Native에서 공식적으로 사용하는 CLI의 메인테이너 대부분이 Callstack 소속 개발자들이다.

React Native 트렌드를 파악하고 싶을 때, 앞서 소개한 세 조직의 활동을 살펴보면 쉽게 파악할 수 있다.

이러한 흐름을 좀 더 깊이 이해하려면, Meta가 React와 React Native 생태계를 어떤 방향으로 이끌고 있는지를 살펴볼 필요가 있다. Meta는 가능한 한 서드 파티 프레임워크를 공식 권장하는 방향으로 전환했는데, 이 내막과 맥락을 이해하기 좋은 아티클도 공유한다.

• React Community 2025

React Native 개발 환경의 전반적인 맥락

이 주제를 설명하기 위해 Excalidraw를 사용해 아키텍처를 시각적으로 그려서 공유했다. 논의된 내용은 별도의 글로 상세히 정리할 필요가 있을 만큼 방대해서, 여기서는 간략하게 아래 그림으로 대신한다.

React Native로 마이크로 프론트엔드 구축하기

이 주제 역시 이야기가 방대했기 때문에, 오갔던 주요 질문과 궁금증만 간략히 소개하고 넘어간다.

• “마이크로 프론트엔드의 핵심인 독립적인 모듈 배포가 React Native에서도 가능한가?”
• “React Native를 단순한 셸(Shell)로 삼아 WebView로 구현하는 방식 말고, 다른 방식이 없을까?”
• “마이크로 프론트엔드를 React Native로 구현한 오픈소스 프레임워크나 도구의 사례가 궁금하다.”
• “Metro 대신 별도의 번들러를 사용하려면 어떤 조건이 필요한가?”
• “Expo 프레임워크만으로 마이크로 프론트엔드를 구현하는 게 가능할까?”

세미나에서 논의 중에 공유된 오픈소스는 다음과 같다.

Callstack의 Re.pack

• Webpack과 Rspack의 Module Federation 플러그인을 확장해 마이크로 프론트엔드 구조를 구현한다.
• 관련 템플릿으로 Callstack의 Super Apps Template가 있다.

토스의 Granite

• React Native 컨퍼런스인 App.js Conf 2025에서 공개했다.
• 자체적인 방식으로 Shared 번들과 Service 번들을 나누어 마이크로 프론트엔드를 구현한다.
• 빌드 결과물을 보면 __granite 라는 네임스페이스를 이용해 모듈 간의 통신을 처리하며, Service 측에서는 __granite_require__ 로 Shared 모듈을 호출한다.
• 관련 아티클: 토스가 꿈꾸는 React Native 기술의 미래

React Native의 구 아키텍처와 새 아키텍처 비교

이 주제에서는 주로 '기존 아키텍처에서의 Bridge 기반 비동기 통신'과 '새 아키텍처에서 JSI (JavaScript Interface)를 활용한 동기 실행 방식' 사이의 핵심 차이를 중심으로 논의했다. 또한, UI 렌더링에서 발생하는 Layout Shift 현상에 대한 차이도 다루었다.

• React Native under the hood
• React Native's JSI Explained

React Native Skia의 개념 및 활용 예제

React Native Skia는 Shopify가 개발한 라이브러리로, React Native에서 브라우저의 Canvas API처럼 선언적 방식으로 2D 그래픽을 구현할 수 있게 한다. 특히 <Shader /> 컴포넌트를 통해 Skia 쉐이더 언어를 편리하게 사용할 수 있다.

세미나에서는 Skia의 역할과 다양한 활용 사례를 짚어보고, React Native Skia를 활용한 간단한 예제를 함께 살펴보며 논의를 마무리했다.

React Native에서 카메라 활용법

카메라 관련 라이브러리를 소개하면서, react-native-camera-kit, expo-camera 등을 언급했다. 자연스럽게 React Native의 Turbo Modules와 Expo의 Expo Modules API를 비교하며, 개발자 경험과 오버헤드 등의 구체적인 차이를 논의했다.

• Expo Modules API: Design considerations

React Native Vision Camera 개요 및 활용 예제

Vision Camera 라이브러리를 소개하고, 이를 활용한 예제를 보면서 논의했다. 예제는 Expo CLI로 생성한 프로젝트였는데, Vision Camera를 사용하려면 Expo Go 환경에서 expo prebuild 명령을 통해 개발 빌드 환경으로 전환해야 했다. 이 과정에서 Expo Go의 샌드박스 환경과 개발 빌드와의 차이를 구체적으로 이야기했다.

또한, Vision Camera와 Reanimated 라이브러리를 함께 활용한 예제도 살펴보았다. 예제 코드에서 Reanimated의 useSharedValue Hook에 Vision Camera가 제공하는 콜백 내에서 값이 할당되지 않는 이슈를 발견했는데, 이 과정에서 Reanimated의 내부 동작 원리와 worklet 의 개념, 네이티브 UI 스레드의 역할 등에 대한 논의가 이어졌다.

• Expo Go vs Development Builds: Which should you use?
• React Native Threading Model
• How does a worklet work?
• Reanimated Babel Plugin

기타 논의된 주제

• “CocoaPods 대신 Swift Package Manager로 대체할 수 있을까?”
  • CocoaPods는 다소 오래된 패키지 매니저로, 현대적인 Swift Package Manager로 대체하면 어떨까 하는 질문이 나왔다. 이에 대해 이미 토스에서 관련 시도를 했으며, 이를 다룬 아티클이 있어 공유했다.
  • 관련 아티클: CocoaPods 없이 React Native 개발하기
• “React Native의 오래된 라이브러리가 새 아키텍처를 지원하지 못하는 이유는 무엇일까?”
  • 처음에는 TurboModules의 지원 여부 때문이라 생각했으나, RCTBridgeModule과 TurboModules가 혼합 사용이 가능하다는 것을 Vision Camera 라이브러리를 통해 깨달았다. 이는 결국 새 아키텍처 지원을 위한 다른 형태의 작업이 필요하다는 의미로 보이지만, 이번 세미나에서는 명확히 파악하지 못했다.
  • 라이브러리의 새 아키텍처 지원 여부를 보려면: React Native Directory
• “스타트업 환경에서 React Native 마이크로 프론트엔드를 안정적으로 운용할 수 있을까?”

막간을 이용하여 Reanimated로 만든 애니메이션 사례도 공유했다.

마치며

React Native를 학습하며 느낀 점이 하나 있다. 마침 React Native 공식 홈페이지에도 비슷한 문장이 있었는데, 그 문장에 내 생각을 덧붙이며 마무리하겠다.

원문:

“React Native brings the React programming paradigm to platforms like Android and iOS.”

내 생각:

“React Native just brings the React programming paradigm to platforms like Android and iOS — but it’s actually very different in how it works.”