Metro | React native

React native

React native는 하나의 코드 구조로 Android와 iOS에서 동작하는 네이티브 앱을 만들 수 있는 JavaScript 프레임워크 입니다.
JavaScript 라이브러리인 React에 기반을 두고 있습니다.
React native는 Metro를 이용하여 JavaScript 코드와 asset을 빌드합니다.

What is metro bundler in react-native?

Metro는 JavaScript 번들러로, 다양한 옵션과 entry 파일을 받아 모든 코드와 종속성을 포함하는 단일 JavaScript 파일을 반환합니다.
React native는 프로젝트를 실행할 때마다 많은 JavaScript 파일을 하나의 파일로 컴파일하는데 이를 Metro 수행합니다.

How Metro helps React Native?

• Metro의 가장 중요한 기능은 UI를 빠르게 추가하고, 디버깅할 때 Sub-second reload cycles를 제공합니다. 전제 앱을 다시 시작하고, 동작하기까지 빠르게 진행됩니다.
• 빠른 번들링 속도를 제공하여 디바이스나 emulator에서 앱을 빠르게 시작할 수 있습니다.
• 모든 JavaScript 코드를 하나의 파일로 결합하고, JSX나 일부 최신 JavaScript 구문과 같이 디바이스가 이해할 수 없는 JavaScript 코드를 변역합니다.
• png 파일과 같은 asset을 이미지 컴포넌트에서 표시할 수 있는 객체로 변환합니다.

How Metro works or does bundling process?

Metro는 번들링 프로세스를 다음의 세 단계로 구분하여 진행합니다.

1. Resolution
2. Transformation
3. Serialization

Resolution

Metro는 진입점(entry point)에서 필요한 모든 모듈의 그래프를 작성해야 합니다.
다른 파일에서 필요한 파일을 찾기 위해 metro는 resolver를 사용합니다.
Resolution 단계는 Transformation 단계와 병렬로 진행됩니다.

Transformation

모든 모듈은 트랜스포머를 거칩니다. 트랜스포머는 모듈을 대상 플랫폼(예: React native)이 이해할 수 있는 형식으로 변환(트랜스파일링)하는 역할을 합니다.
모듈 변환은 코어의 양에 다라 병렬로 이루어집니다.

Serialization

모든 모듈이 transformation 과정을 거쳐 접근 가능한 형식으로 변환된 후 직렬화(serialized)됩니다. Serializer는 모듈을 결합하여 하나 또는 여러 개의 번들을 생성합니다. 번들은 하나의 JavaScript 파일로 결합된 모듈의 번들을 의미합니다.

참고

• What is metro bundler in react-native?
• Role of Metro Bundler in React native
• Metro