Skip to main content

metro

id: metro title: Metro

React Native는 JavaScript 코드와 에셋을 빌드하기 위해 Metro를 사용한다.

Metro 설정하기​

Metro의 설정 옵션은 프로젝트의 metro.config.js 파일에서 커스터마이징할 수 있다. 이 파일은 다음 중 하나를 내보낼 수 있다:

  • 객체 (권장): Metro의 내부 기본 설정과 병합된다.
  • 함수: Metro의 내부 기본 설정을 인자로 받아 최종 설정 객체를 반환한다.
tip

모든 설정 옵션에 대한 문서는 Metro 웹사이트의 Configuring Metro를 참고하자.

React Native에서 Metro 설정은 @react-native/metro-config나 @expo/metro-config를 확장해야 한다. 이 패키지들은 React Native 앱을 빌드하고 실행하는 데 필요한 필수 기본값을 포함하고 있다.

아래는 React Native 템플릿 프로젝트의 기본 metro.config.js 파일이다:

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);

커스터마이징하려는 Metro 옵션은 config 객체 내에서 설정할 수 있다.

고급: 설정 함수 사용하기​

설정 함수를 내보내면 최종 설정을 직접 관리할 수 있다. Metro는 내부 기본값을 적용하지 않는다. 이 패턴은 Metro의 기본 설정 객체를 읽거나 동적으로 옵션을 설정해야 할 때 유용하다.

info

@react-native/metro-config 0.72.1 버전부터는 설정 함수를 사용하지 않고도 전체 기본 설정에 접근할 수 있다. 아래 팁 섹션을 참고한다.

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

module.exports = function (baseConfig) {
  const defaultConfig = mergeConfig(baseConfig, getDefaultConfig(__dirname));
  const {resolver: {assetExts, sourceExts}} = defaultConfig;

  return mergeConfig(
    defaultConfig,
    {
      resolver: {
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
      },
    },
  );
};
tip

설정 함수는 고급 사용 사례를 위한 것이다. sourceExts를 커스터마이징하는 것과 같은 간단한 작업이라면 @react-native/metro-config에서 기본값을 읽는 것이 더 쉽다.

대안

js
const defaultConfig = getDefaultConfig(__dirname);

const config = {
  resolver: {
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
  },
};

module.exports = mergeConfig(defaultConfig, config);

하지만! 이러한 설정 값을 재정의할 때는 복사하고 편집하는 것을 권장한다. 설정 파일에서 진리의 원천(source of truth)을 유지하는 것이 좋다.

✅ 권장

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

Metro에 대해 더 알아보기​