[React Native] Path alias 설정

방법은 2가지가 있습니다.

1. tsconfig + package.json

• tsconfig 파일을 설정해주고
• path alias를 설정할 모든 폴더에 package.json 파일을 만들어줍니다.
• 모든 폴더에 package.json 파일을 만들어야 해서 번거롭다는 단점이 있습니다.

//tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@routes/*": ["routes/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

//routes 폴더 안의 package.json 파일
{
  "name": "@routes"
}

2. tsconfig + babel.config.js

• tsconfig파일을 설정해주고
• babel.config.js 파일을 설정해줍니다
• 여기서 주의할 점은 babel.config.js 파일의 alias에는 *가 들어가지 않습니다.

//tsconfig.json

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@routes/*": ["routes/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

//babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.js',
          '.ts',
          '.jsx',
          '.tsx',
          '.json',
        ],
        alias: {
          '@components': './src/components',
          '@hooks': './src/hooks',
          '@pages': './src/pages',
          '@routes': './src/routes',
          '@types': './src/types',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};