Metro
React Native는 자바스크립트 코드와 에셋을 빌드하기 위해 Metro를 사용한다.
Metro 설정하기
Metro의 설정 옵션은 프로젝트의 metro.config.js 파일에서 커스터마이징할 수 있다. 이 파일은 다음 중 하나를 내보낼 수 있다:
- 객체 (권장): Metro의 내부 기본 설정과 병합된다.
- 함수: Metro의 내부 기본 설정을 인자로 받아 최종 설정 객체를 반환한다.
모든 사용 가능한 설정 옵션에 대한 문서는 Metro 웹사이트의 Configuring Metro를 참고한다.
React Native에서 Metro 설정은 @react-native/metro-config 또는 @expo/metro-config를 확장해야 한다. 이 패키지들은 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);
커스터마이징하려는 Metro 옵션은 config 객체 내에서 설정할 수 있다.
고급: 설정 함수 사용하기
설정 함수를 내보내면 최종 설정을 직접 관리할 수 있다. Metro는 내부 기본값을 적용하지 않는다. 이 패턴은 Metro의 기본 설정 객체를 읽거나 동적으로 옵션을 설정해야 할 때 유용하다.
@react-native/metro-config 0.72.1 버전부터는 완전한 기본 설정에 접근하기 위해 설정 함수를 사용할 필요가 없다. 아래 팁 섹션을 참고한다.
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'],
},
},
);
};
설정 함수는 고급 사용 사례를 위한 것이다. 위의 방법보다 간단한 방법은 @react-native/metro-config에서 기본값을 읽는 것이다. 예를 들어 sourceExts를 커스터마이징할 때 사용할 수 있다.
대안
const defaultConfig = getDefaultConfig(__dirname);
const config = {
resolver: {
sourceExts: [...defaultConfig.resolver.sourceExts, 'svg'],
},
};
module.exports = mergeConfig(defaultConfig, config);
하지만! 이러한 설정 값을 재정의할 때는 복사하고 편집하는 것을 권장한다. 설정 파일에 진실의 소스(source of truth)를 두는 것이 좋다.
✅ 권장
const config = {
resolver: {
sourceExts: ['js', 'ts', 'tsx', 'svg'],
},
};