[React Native] src를 절대 경로로 설정하기

babel-plugin-root-import를 설치한다

npm install babel-plugin-root-import

 

src 디렉토리를 생성하고 App.js (혹은 App.tsx)를 src 폴더로 이동시킨다

babel.config.js 파일을 열고 아래와 같이 수정한다

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

 

tsconfig.json 파일을 열고 baseUrl과 paths를 추가한다

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es2017"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "zipdo/jest.config.js"
  ]
}

 

 

 

index.js 파일을 열고 수정한다

import App from '~/App'