[React Native] import 절대 경로 세팅

React Native/TypeScript 환경에서 모듈을 import 할 때 상대 경로로 '../../../...' 점점 길어지는 게 보기 싫어서 절대경로 설정을 하려고 한다.

1. babel-plugin-module-resolver 설치

babel-plugin-module-resolver 라이브러리를 사용하면 모듈의 별칭(alias)을 설정해서 절대경로로 import 할 수 있게 된다.

 npm 문서: https://www.npmjs.com/package/babel-plugin-module-resolver

npm i babel-plugin-module-resolver
# or
yarn add babel-plugin-module-resolver

 

2. babel.config.js 파일 설정

작성일인 2023-02-18일 기준으로는 react native 프로젝트를 생성하면 babel.config.js 파일이 있다.

alias에서 절대경로로 사용할 모듈 주소를 작성한다.

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',
          '@const': './src/const',
        },
      },
    ],
  ],
};

 

3. tsconfig.json 설정

babel.config.js 파일 설정이 끝났으면 tsconfig.json 파일도 설정해주어야 한다.

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

 

4. 코드 확인

설정한 @const가 잘 적용되는 걸 확인할 수 있다.

import React from 'react';
import { View } from 'react-native';
import { TEST2 } from '@const/testConst';

export default function Sample() {
  return <View>{TEST2}</View>;
}

 

5. index.ts 파일로 관리할 때

만약 const/index.ts 파일로 모듈을 관리한다면 path에 /* 없이 하나 더 추가해 준다.

(이거보다 더 좋은 방법이 있을 것 같은데 못 찾았다...)

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

import { TEST } from '@const';

 

6. Error: @const could not be found within the project or in these directories:node_modules

버전문제인지 무엇 때문인지 아직 원인을 밝히지는 못했지만 @가 node_moduules 경로를 보는 것 같다.

그래서 @로 작성한 내용을 #으로 바꿔줬더니 잘 작동한다.

다른 분들은 @로 잘 사용하는 거 같은데...