javascript의 import 혹은 require를 사용할 때, 사용한 폴더의 depth가 깊은 경우, 상대 경로를 계속해서 잡아주어야 하는 단점이 있습니다.

import Module from '../../../../../Module';

이러한 경우 Module이라는 js 경로가 변경되는 경우, 해당 모듈을 사용하는 모든 파일을 변경해 주어야 하는 번거로움이 생깁니다. 이러한 단점을 보완하기 위해서, 우리는 module resolve 혹은 alias 설정을 통해 설정한 경로에 따른 모듈 import를 가능할 수 있게 합니다.

// in webpack
ouput: {
	alias: {
		'components': './src/components'
	}
}

// in file
import Comp from 'components/Comp';

javascript에서 babel을 사용할 경우, babel내 plugin중, babel-plugin-module-resolver 또는 webpack의 output.alias 설정을 통해 module resolve 설정을 해줄 수 있게 됩니다.

// terminal
npm i babel-plugin-module-resolver

// in .babelrc
{
	"plugins": [
		[
			"module-resolver",
			{
				"root": ["./src"],
				"alias": {
					"components": "./components"
				}
			}
		]
	]
}

typescript에서는 tsconfig 안에서의 path 옵션을 통해, babel의 alias와 같은 설정이 가능합니다.

{
	"paths": {
		"components/*": ["src/components/*"],
	}
}

react-native를 바로 사용하지 않고, create-react-native-app을 이용하여 만들 경우, typescript alias를 적용하는 방법은 쉽지는 않습니다. create-react-native-app을 이용하여 typescript를 사용할 경우, tsc를 통한 컴파일링이 필요한데, 컴파일된 파일은 js로 컴파일되므로, alias가 적용되지 않는 결과로 출력되어 에러가 발생합니다.

이러한 문제를 해결하기 위해서, babel-plugin-module-resolver를 설치하여, .babelrc내에서 typescript로 컴파일링 된 js 파일의 path를 잡아줌으로써 해결할 수 있습니다.

src 폴더에 App.ts가 있고, src/components 폴더에 comp1.ts 와 comp2.ts 파일이 있습니다. App.ts 파일은 comp1.ts 와 comp2.ts 파일을 import 합니다. 이 프로젝트의 tsconfig.json내의 path 설정은 다음과 같을 것입니다.

{
	"path": {
		"components/*": ["src/components/*"]
	}
}

App.ts 파일에서 comp1.ts와 comp2.ts의 import는 다음과 같이 설정될 것입니다.

import Comp1 from 'components/comp1';
import Comp2 from 'components/comp2';

tsc를 이용하여 컴파일하면, 다음과 같이 dist 폴더 내에 dist/src/App.js 와 dist/src/components/comp1.js, dist/src/components/comp2.js로 컴파일 될 것입니다. babel-plugin-module-resolver를 이용하여, 컴파일된 파일 내에 module resolve 기능을 설정합니다. 기준은 dist 폴더 내에 컴파일된 파일을 기준으로 alias를 설정합니다.

{
	"plugins": [
		[
			"module-resolver": {
				"extensions": [
					".js",
				],
				"alias": {
					"components": "./dist/src/components"
				}
			}
		]
	]
}

.babelrc 설정이 완료되면, 정상적으로 react-native 앱이 컴파일링 됩니다.