[React-Native] 파일 절대경로(alias) 설정하기 (+ typescript)

개발하다 보면 deps가 깊어지고,, 문득 컴포넌트나 이미지 하나 불러오는데 코드가 이렇게 되곤 합니다.

매우 예쁘지 않고 심지어 징그럽습니다..

때문에 제가 새로운 프로젝트를 설정할 때 제일 먼저 하는것 중 한가지가 절대경로 설정입니다!

절대경로 지정하는법

1. babel-plugin-module-resolver 설치하기

먼저 아래와 같은 babel-plugin-module-resolver를 설치하여 줍니다.

npm i babel-plugin-module-resolver

2. babel.config.js 설정 변경하기

babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일입니다.

기본적으로 React-Native 프로젝트는 다음과 같습니다.

이를 아래와 같이 바꿔줍니다.

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',
          '~apis': './src/apis',
          '~components': './src/components',
          '~nav': './src/routes',
          '~screens': './src/screens',
          '~icons': './src/static/icons',
          '~images': './src/static/images',
        },
      },
    ],
  ],
};

간단히 설명하자면
root: [ ] 부분에 기준이 되길 원하는 경로를 지정하고,
alias 부분에 절대경로를 사용하길 원하는 이름 : 해당 경로를 기준으로 경로입력해주시면 됩니다.

저는 src 폴더 안에 components, screens, assets 등 모든 폴더가 있는 구조로 프로젝트가 구성되어 있어서 이에 대한 alias를 구성하여 빌드시 절대 경로로 해당 폴더에 접근할 수 있도록 설정하였습니다.

3. tsconfig.js 설정하기 (Typescript 사용시)

만약 타입 스크립트를 사용하신다면 tsconfig.js도 설정을 해야합니다.

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
     "paths": {
      "~apis/*": ["src/apis/*"],
      "~components/*": ["src/components/*"],
      "~nav/*": ["src/routes/*"],
      "~screens/*": ["src/screens/*"],
      "~icons/*": ["src/static/icons/*"],
      "~images/*": ["src/static/images/*"]
    },
    ...
  }  
}

compilerOptions 안에서
baseUrl에는 위에서 설정해둔 root 과 같은 경로를,
paths에는 위에서 설정해준 alias 과 같은 형식으로 지정해주시면 됩니다.

모든 설정 저장 후 다시 빌드 돌려보면, 이런식으로 경로를 입력해도 잘 가져오는것을 확인할 수 있습니다.👍🏻