0. 개요

상대 경로로 개발을 하다보면 가독성이 매우 떨어지는 경우가 가끔씩 있다.
예를 들면 다음과 같은 경우이다.

import Temp from '../../../../components/apis/temporary/temp.tsx';
import Temp from '../../../../../screens/userInfo/userList/user.tsx';
...

만약에 components 폴더와 screens 폴더를 어느 파일에서든 절대 경로로 부를 수 있다면 가독성이 매우 좋아질 것이다.
이를 설정하기 위해 포스트를 작성한다.

1. babel-plugin-module-resolver

RN 프로젝트 생성하면 기본적으로 babel.config.js 파일이 생성된다.
이는 말그대로 Babel 에 대한 설정을 저장하고 있는 config 파일이다.
여기서 babel-plugin-module-resolver 라이브러리를 설치하여 Babel 의 플러그인을 사용함으로서 별칭(alias) 경로를 설정하여 절대 경로를 만들어준다.

1) 설치

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

2) babel.config.js 설정

babel.config.js 파일 내용을 다음과 같이 수정하자.

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

alias 객체 내에 각 프로젝트가 가지는 폴더구조로 절대경로를 설정한다.

2. TypeScript 사용 시

TypeScript 사용 시에는 tsconfig.json 파일도 함께 설정해야 오류가 나지 않는다.

RN v0.71.7 기준 기본적으로 tsconfig.json 파일은 다음과 같이 적혀있다.

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

이를 다음과 같이 변경한다

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["components/*"],
      "@screens/*": ["screens/*"],
      "@assets/*": ["assets/*"]
    }
  }
}

"paths" 내의 내용을 babel.config.js 에서 정의한 alias 대로 동일하게 적어준다.