Native Absolute Imports를 빠르고 쉽게 반응하세요!

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

프로젝트의 폴더 구조가 복잡하면 다음과 같이 프로젝트에서 상대적으로 긴 임포트를 갖게 됩니다.
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 사용
반응 네이티브 프로젝트에서 TypeScript를 사용하는 경우 프로젝트의 루트 디렉터리에 있는 파일tsconfig.json을 업데이트하고 내부에 동일한 설정compilerOptions을 Javascript로 추가합니다.

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

4단계 - 절대 가져오기 구현
이제 절대 가져오기 설정이 사용자 지정 기본 디렉터리로 src 폴더를 사용하여 성공적으로 구성되었으며 다음과 같이 src/components/form/input.js에 있는 입력 구성 요소를 가져올 수 있습니다.
import Input from '@app/components/form/input';
그게 다야! 빠르고 쉽게! 행복한 학습!