React Native 절대경로 설정하기

 

이번 글은 React Native에서 절대경로 설정하는 방법에 대해 작성하려고 합니다.

 

RN은 워낙 버전 크러쉬로 악명 높지만 절대경로 설정 방법은 기존의 React 웹 프로젝트와 크게 다른 점은 없기 때문에 쉽게 설정할 수 있습니다.

 

 

설치

우선 babel 관련 프리셋과 플러그인을 설치해 줍니다.

// npm
npm install --save-dev @babel/preset-react


// yarn
yarn add @babel/preset-react --dev

 

그 다음 플러그인을 사용해요 경로 별칭(alias)을 설정해 주기 위해 Babel의 module resolver을 개발 의존성으로 설치합니다.

// npm
npm install --save-dev babel-plugin-module-resolver

// yarn
yarn add --dev babel-plugin-module-resolver

 

설정파일 세팅하기

그 다음 babel.config.js 파일에서 추가한 프리셋과 alias를 설정합니다.

저는 '@' 를 src 기준으로 설정하여 그 안에 있는 폴더들도 같이 설정해 주었습니다. 

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@': './src',
          '@assets': './src/assets',
          '@components': './src/components',
          '@constants': './src/constants',
          '@hooks': './src/hooks',
          '@server': './src/server',
          '@type': './src/type',
          '@utils': './src/utils',
          '@store': './src/store',
        },
      },
    ],
    'react-native-reanimated/plugin',
  ],
};

 

추가로 alias와 같이 tsconfig.json도 설정해 주면 됩니다.

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "@assets/*": ["assets/*"],
      "@components/*": ["components/*"],
      "@constants/*": ["constants/*"],
      "@hooks/*": ["hooks/*"],
      "@server/*": ["server/*"],
      "@types/*": ["types/*"],
      "@utils/*": ["utils/*"],
      "@store/*": ["store/*"],
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ],
  "extends": "@tsconfig/react-native/tsconfig.json"
}

 

테스트하기

아래 사진과 같이 '@/~' 형식으로 잘 불러와주는지 테스트하면 됩니다.

테스트 사진

 

 

 

 

 

끝