[React Native] Metro Bundler

Metro Bundler: React Native의 핵심 번들러

Metro Bundler는 React Native 앱의 JavaScript 코드를 번들링하고, 효율적으로 네이티브 환경과 연결하는 데 사용되는 도구입니다. Metro는 React Native의 기본 번들러로, 빠른 개발 및 디버깅을 지원하며 모바일 환경에 최적화되어 있습니다.

---

Metro Bundler의 주요 역할

1. JavaScript 코드 번들링
   • Metro는 React Native 프로젝트의 JavaScript 코드를 **하나의 파일(bundle)**로 압축하여 네이티브 환경(Android, iOS)에서 실행할 수 있도록 준비합니다.
   • 코드 스플리팅 없이 단일 번들 파일로 구성하여 모바일 환경에서 로드 시간을 줄이는 데 집중합니다.
2. Code Transformation (트랜스파일링)
   • 최신 JavaScript (ES6+) 코드를 Babel을 통해 트랜스파일링하여 모든 환경에서 실행 가능한 코드로 변환합니다.
   • JSX 및 TypeScript를 일반 JavaScript로 변환.
3. Asset Handling
   • 이미지, 폰트 등의 정적 자산을 네이티브 앱에서 접근 가능한 형식으로 처리합니다.
   • 예: 이미지 파일을 require하거나 import하면 Metro가 이를 번들에 포함시킵니다.
4. Hot Module Reloading (HMR)
   • 코드 변경 시, 앱 전체를 재시작하지 않고 변경된 모듈만 즉시 업데이트하여 생산성을 높입니다.
   • 이를 통해 앱 상태를 유지하면서 UI와 기능의 수정 사항을 확인 가능.
5. Dependency Graph 관리
   • 프로젝트 내 모든 모듈의 의존성을 추적하고 최적화된 방식으로 번들을 생성합니다.
   • 의존성 그래프는 효율적인 캐싱 메커니즘을 사용해 빠르게 업데이트됩니다.
6. Development Server
   • Metro는 React Native 앱 실행 시 로컬 개발 서버로 동작하며, 모바일 에뮬레이터 또는 물리적 장치에 번들을 전송합니다.

 

Metro Bundler의 특징

1. 빠른 빌드 속도

• Metro는 React Native 앱을 위한 모바일 전용 번들러로 설계되어, 크고 복잡한 프로젝트에서도 빠른 빌드 속도를 제공합니다.
• 효율적인 캐싱 메커니즘 덕분에 변경된 파일만 다시 번들링.

2. Platform-Specific Bundles

• Metro는 iOS와 Android 플랫폼에 따라 플랫폼별 번들을 생성합니다.
• 예를 들어, index.ios.js와 index.android.js 파일을 기반으로 각각의 플랫폼에 최적화된 코드를 생성.

3. Custom Transformers

• Metro는 플러그인을 사용해 사용자 정의 트랜스포머를 설정할 수 있습니다.
• 예: TypeScript를 지원하기 위한 설정 추가.

4. Custom Resolver

• 특정 모듈의 경로를 사용자 정의 규칙으로 해석 가능.
• 예를 들어, ~를 프로젝트 루트로 매핑하거나 특정 파일 확장자를 우선적으로 로드.

5. Tree Shaking

• 사용되지 않는 코드를 제거하여 번들 크기를 최소화합니다.
• React Native는 초기에는 모든 코드를 포함하지만, production 모드에서는 필요한 코드만 포함.

 

Metro의 구성 요소

1. Server
   • 개발 중 앱과 연결하여 번들을 제공하고 디버깅 기능을 제공합니다.
   • localhost:8081에서 실행.
2. Graph
   • 의존성 그래프를 구성하여 모듈 간의 연결 상태를 관리합니다.
3. Transformer
   • 코드를 트랜스파일링하고 최적화합니다. 예: Babel 트랜스폼.
4. Bundler
   • 최종적으로 번들을 생성합니다. 이는 모바일 장치에서 실행 가능한 단일 파일입니다.
5. Watcher
   • 파일 변경을 감지하고 번들을 업데이트하여 HMR을 가능하게 합니다.

 

Metro Bundler와 Webpack의 차이점

FeatureMetro BundlerWebpack

목적	React Native 전용 번들러	웹 애플리케이션 번들러
코드 스플리팅	기본적으로 지원하지 않음	코드 스플리팅 지원
정적 자산 처리	이미지 및 자산의 네이티브 핸들링	파일 로더, URL 로더 사용
설정 난이도	설정이 간단 (거의 필요 없음)	설정 파일 필요
핫 모듈 리로드 (HMR)	React Native에 최적화	웹에 최적화