React-native alias baseUrl 환경설정

React, Next.js 에서 자주 사용하던 baseUrl(alias path) 설정을 RN 에서도 적용하던 중 발생한 에러상황들을 해결한 환경셋팅 값이다.

TS 환경이면 당연히 tsconfig.json 환경 값을 변경한다.

• tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@screens/*": ["src/screens/*"],
      "@navigation/*": ["src/navigation/*"],
      "@constants": ["src/constants"] // index.ts 단일 파일만 존재하는 경우
    },
    "jsx": "react-native", // jsx 환경을 react-native
    "esModuleInterop": true // commonJS를 ES6 형태로 import 가능하게
  }
}

• babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          '@': './src',
          '@components': './src/components',
          '@screens': './src/screens',
          '@navigation': './src/navigation',
          '@constants': './src/constants',
        },
      },
    ],
  ],
};

추가로, metro 번들러의 경로 설정도 넣어주어야 에뮬레이터에서 에러가 발생하지 않는다.

• metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    extraNodeModules: {
      '@': `${__dirname}/src`,
      '@components': `${__dirname}/src/components`,
      '@screens': `${__dirname}/src/screens`,
      '@navigation': `${__dirname}/src/navigation`,
      '@constants': `${__dirname}/src/constants`,
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

RN환경에서는 metro 번들러를 추가로 신경써주어야 한다..