React Native 절대경로 import 구현 하기

이 프로젝트 기준은 react-native init을 통하여 생성된 프로젝트 대상으로 합니다.

---

React Native 개발 시 각 컴포넌트에서 다른 컴포넌트 및 여러 파일을 import을 해서 사용한다.

이때, 다른 경로에 있는 파일에 접근하기 위해서는 일반적으로 상대경로를 통해 접근이 가능하다.

그런데 상대경로가 아닌 절대경로 개념으로 접근하기 위해서는 별도의 라이브러리 사용 및 환경 설정이 필요하다. 대표적인 라이브러인 react-native-root-import을 사용하여 root절대 경로 import기능을 구현한다.

 

상대경로 접근 문제점

import MyUtilFn from '../../../../utils/MyUtilFn'

위 소스처럼 폴더와 파일들이 점점 많아지고 작성하는 상대 경로의 depth가 깊어질수록 복잡한 코드가 형성되기 쉽고,폴더 구조를 눈을 따라가며 depth 만큼 ../를 추가하게 됨으로써 몇개 써야 될지 헷갈리게 되고 이는 예기치 않은 오류를 발생시킬 수 있다.

 

이때 절대경로로 import를 구현하면 아래와 같아진다. 

import MyUtilFn from '~/utils/MyUtilFn'

~/와 같이 src 폴더를 root로 세팅하여 ~/가 src 폴더를 지칭하게끔 세팅하게 되면 상대 경로 접근법의 문제점을 해결 할 수 있는데

babel-plugin-root-import 또는 babel-plugin-module-resolver 를 활용한다.

 

1. babel-plugin-root-import 설치 및 적용

yarn 설치

yarn add --dev babel-plugin-root-import

babel.config.js 파일을 통한 환경 설정

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      { rootPathPrefix: '~', rootPathSuffix: 'src', },    
    ],
  ],
};

babel 설정 파일을 설정해줍니다.

rootPathSuffix에는 진짜 경로를 적고 rootPathPrefix에는 우리가 사용할 alias를 설정해주면 됩니다.

tsconfig.json

타입스크립트 사용 하는 경우 및 VSCODE에 자동완성을 위해 설정한 경로를 tsconfig.json파일에도 설정해줘야합니다.

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  }
}

metro server 캐시 리셋

설정을 변경 했다면 metro server의 캐시를 리셋해야 적용이 됩니다.

yarn start —reset-cache

2. babel-plugin-module-resolver 설치 및 적용

yarn 설치

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

babel-plugin-module-resolver 를 devDependencies에 설치

babel.config.js 파일을 통한 환경 설정

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
  ],
}

alias 설정

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "~": "src",
          "@components": './src/components',
          "imgs": "./assets/imgs"
        }
      }
    ]
  ]
}

ESLint를 사용하는 경우

eslint가 설정되어 있다면 Unable to resolve path to module 오류가 발생합니다.

이를 해결하기 위해 eslint-plugin-import 및 eslint-import-resolver-babel-module 을 사용해야합니다.

eslint-plugin, eslint-import-resolver-babel-module 설치

yarn add --dev eslint-plugin-import
yarn add --dev eslint-import-resolver-babel-module

.eslintrc.js 파일 설정 추가

module.exports = {
  ...
  settings: {
    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
    'babel-module': {},
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.native.js'],
      },
    },
  },
};

tsconfig.json

타입스크립트 사용 하는 경우 및 VSCODE에 자동완성을 위해 설정한 경로를 tsconfig.json파일에도 설정해줘야합니다.

{
  "compilerOptions": {
    ...
		"baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "imgs/*": ["./assets/imgs/*"],
    }
  }
}

metro server 캐시 리셋

설정을 변경 했다면 metro server의 캐시를 리셋해야 적용이 됩니다.

yarn start —reset-cache

 

참고자료

https://www.npmjs.com/package/babel-plugin-root-import

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