react-native 모듈 간편하게 import 시키기

내가 만든 모듈이 많아지고 파일 구조의 깊이가 깊어질 수록 좀 지저분해 보인다.

// Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn';

아래 import 문에서 위의 import문처럼 './../../'을 빼고 사용할 수 있도록 세팅할 수 있다.

babel-plugin-module-resolver 설치하고 babel.config.js을

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['./src'], extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], alias: { images: './src/assets/images', }, }, ], ], }

이렇게 수정해줬다. react-native-cli 에서 제공한 기본 babel.config.js 파일에 plugins만 추가했다.
글에서는 eslint/ts 오류가 나면 따로 설정해줘야 한다고 하는데 나는 ts오류만 나서 tsconfig.js파일만 수정해줬다.

{ "compilerOptions": { "baseUrl": "./src", .... } }

baseUrl만 설정해줬다.

./src/ 빼도 잘 오류없이 잘 작동하는 것 확인

참고:
github.com/tleunen/babel-plugin-module-resolver
medium.com/react-native-seoul/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-module-resolver-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-b28f607fd0bb