React-Native + Typescript에서 절대경로 사용하기

코딩시 절대 경로 사용에 대한 필요성은 따로 언급 할 가치가 없을 정도로 중요하다.

React-native + Typescript 환경에서 절대 경로를 추가하는 방법으로는 babel의 alias 설정을 바꿔주는 방법이 있다.

그 도구로써 babel-plugin-module-resolver로 간단히 변경 가능하다.

 

설치방법

모듈 설치

$ yarn add --dev babel-plugin-module-resolver

 

babel.config.js 파일 수정

alias 부분에 원하는 주소를 써 넣는다.

module.exports = {
	presets: ['module:metro-react-native-babel-preset'],
	plugins: [
		[
			'module-resolver',
			{
				root: ['.'],
				extensions: ['.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.jsx', '.js', '.json'],
				alias: {
					'~': './src',
					'@utils': './src/utils',
					'@res': './src/res',
					'@svg': './src/res/svg',
					'@hooks': './src/hooks',
					'@locales': './src/locales',
				},
			},
		],
	],
};

 

tsconfig.js 파일 수정

{
		...
		"baseUrl": "./src", /* Base directory to resolve non-absolute module names. */
		// Base directory to resolve non-absolute module names.
		"paths": {
			"~/*": [
				"./*"
			],
			"@utils/*": [
				"utils/*"
			],
			"@res/*": [
				"res/*"
			],
			"@svg/*": [
				"res/svg/*"
			],
			"@hooks/*": [
				"hooks/*"
			],
			"@locales": [
				"locales"
			]
		},
        ...
}

 

캐시를 리셋 한다.

이것 때문에 개 고생했다. 분명히 되어야 하는데 실행이 안되고 안되어야 하는데 실행이 되고 그런다.....

설정을 변경 했다면 무조건 캐시를 리셋해 주자!!

$ yarn start —reset-cache

 

 

테스트

이제 다음과 같이 사용 할 수 있다!! WOW!

import { useAppSettings, getAppSettings } from '~/settings';
import { containAlphabet } from '@utils/string-util';
import { useLocalization } from '@locales';

 

 

 

참고: https://medium.com/@sterlingcobb/adding-alias-to-create-react-native-app-crna-in-2-minutes-45574f4a7729