React Native path alias 설정하기

📌 목차

• 서론
• 바벨 라이브러리 설치
• .babel.config.js
• tsconfig
• 캐시 리셋

📌 서론

해당 글에서는 react native + typescript에서 path alias를 설정하는 방법에 대해 기술합니다.

만약 typescript 프로젝트가 아닌, javascript 프로젝트라면 tsconfig 부분만 제외하고 따라하면 됩니다.

📌 바벨 라이브러리 설치

먼저 babel-plugin-module-resolver를 설치해야합니다.

yarn add babel-plugin-module-resolver -D
npm install babel-plugin-module-resolver -D

📌 babel.config.js

module-resolver로 plugin을 설치해주고 path를 잡으면 됩니다.

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

📌 tsconfig

위에 path를 동일하게 tsconfig에도 설정해줍니다.

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

📌 캐시 리셋

그리고 이제 다시 앱을 시작해주면 됩니다.

yarn start -—reset-cache
npm run start --reset-cache