React Native의 Absolute Imports 소개

React Native Absolute 가져오기 — 초보자도 쉽게 사용할 수 있습니다.

절대 가져오기는 경로를 단순화하고 성장함에 따라 프로젝트를 더 잘 구성하는 데 도움이 됩니다. 또한 절대 가져오기를 사용하면 가져온 코드를 복사하여 프로젝트의 다른 파일에 붙여넣기가 더 쉽고 가져오기 경로를 수정하지 않아도 됩니다.

프로젝트의 폴더 구조가 복잡한 경우 다음과 같이 프로젝트에서 긴 상대 가져오기를 갖게 됩니다.

import Input from ‘../../../components/form/input’;

리팩토링하기가 꽤 어려울 수 있고 지저분해 보일 수 있습니다. 해결책은 상대 가져오기를 절대 가져오기로 변환하는 것입니다.

1단계 - 플러그인 설치babel-plugin-module-resolver

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

또는

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

2단계 - 업데이트babel.config.jsbabel.config.js에 다음 코드 스니펫을 추가합니다.

module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@app': './src',
        },
      },
    ],
  ],
}

참고: @app는 원하는 대로 지정할 수 있는 별칭입니다.

3단계 - jsconfig.json 또는 tsconfig.json 설정

자바스크립트 사용
jsconfig.json 파일(프로젝트의 루트 디렉토리)을 생성/열고 아래 스니펫에 표시된 대로 baseUrl 내부에 paths 및 compilerOptions 설정을 추가합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

TypeScript 사용

React Native 프로젝트에서 TypeScript를 사용하는 경우 프로젝트의 루트 디렉터리에 있는 파일tsconfig.json을 업데이트하고 내부에 동일한 설정compilerOptions을 JavaScript로 추가합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

4단계 - 절대 가져오기 구현

이제 절대 가져오기 설정이 사용자 지정 기본 디렉터리로 src 폴더를 사용하여 성공적으로 구성되었으며 다음과 같이 src/components/form/input.js에 있는 입력 구성 요소를 가져올 수 있습니다.

import Input from '@app/components/form/input';

행복한 학습! 이 기사에 박수를 치고 더 많은 기사를 최신 상태로 유지하려면 팔로우하십시오!

게시물An Introduction to Absolute Imports in React Native은 Anlisha Maharjan에 처음 등장했습니다.