[React Native] Metro란

리액트 네이티브는 메트로를 사용하여 javascript 코드와 에셋을 빌드합니다.

Metro 구성

메트로의 구성 옵션은 프로젝트의 metro.config.js 파일에서 사용자 지정할 수 있습니다.

• 객체로 Metro의 기본 구성에 추가로 병합됩니다.
• 함수로 Metro의 기본 구성을 인수로 받아 최종 구성 객체를 반환해야 합니다.

react native에서는 @ract-native/metro-config를 확장하는 metro 구성을 사용해야 합니다. 이 패키지들은 react native 앱을 빌드하고 실행하는 데 필요한 기본 설정을 포함하고 있습니다.

아래는 react native 템플릿 프로젝트의 기본 metro.config.js 파일입니다.

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://metrobundler.dev/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

사용자가 원하는 메트로 옵션은 config 객체 내에서 지정할 수 있습니다.

const config = {
  resolver: {
    sourceExts: ['js', 'ts', 'tsx', 'svg'],
  },
};