리액트 네이티브 import 절대경로 설정하기

import 경로를 간소화할 수 있는 절대경로 설정 방식을 설명한다.

babel-plugin-module-resolver 설치

npm install --save-dev babel-plugin-module-resolver

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

tsconfig.json

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

• screens 폴더의 모든 파일을 @screens 경로에서 가져오도록 설정했다.

babel.config.js

module.exports = {
  presets: ["module:@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",
          "@screens": "./src/screens",
        },
      },
    ],
  ],
};

• tsconfig.json에서만 path를 설정하면 다음과 같은 에러가 발생한다.

  Error: Unable to resolve module @screens/Home from C:\Users\heeryoung\yumyumpick\AppInner.tsx: @screens/Home could not be found within the project or in these directories:

• babel.config.js 파일에서도 alias를 설정한다. @screens 경로에 대한 설정을 추가했다.

캐시 청소

react-native start --reset-cache

• 캐시되어 있는 설정이 다시 실행 되지 않도록 서버를 다시 시작하기 전에 캐시를 청소하는 것을 추천한다. 캐시 청소만으로도 에러가 해결될 수 있다.

Reference

Using Absolute Paths in React Native
절대경로 설정하기 (React Native + ts)
[React Native] import 절대 경로 세팅