리액트 네이티브 절대 경로 지정 Feat. babel

리액트에서 utils, 컴포넌트, 페이지 들을 작업하면서 모듈로 작업을 했을때

../../../ 경로를 절대경로로 하는 방법을 알아보자.

 

 

먼저 바벨 플러그인을 설치

babel-plugin-module-resolver

npm i -D babel-plugin-module-resolver

 

/babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        alias: {
          '@': './src',
        },
      },
    ],
  ],
};

/tsconfig.json

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