[React Native] RN - 절대경로 설정하기

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다.

 

처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다.

 

상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요.

 

하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다.

 

처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다.

 

절대 경로를 무조건 설정해야 하는 것은 아닙니다.

 

상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다.

 

절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다.

 

 

Install

① 모든 React 플러그인에 대한 Babel 사전 설정

 

Using npm:

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

or using yarn:

yarn add @babel/preset-react --dev

 

② 프로젝트의 필요/가져오기 경로를 단순화 설정

 

Using npm:

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

or using yarn:

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

 

설정파일 세팅하기

babel.config.js 파일은 수정하시면 되고 tsconfig.json 파일은 추가하시면 됩니다.

 

babel.config.js

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',
        },
      },
    ],
  ],
};

 

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"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

 

테스트 하기

src/components 폴더를 생성 후 App.js에 import 후 테스트 해보시면 됩니다.

 

수고하셨습니다.