리액트 컴포넌트를 절대경로로 임포트하는 방법

안녕하세요.

 

오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다.

아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : )

 

왜 절대경로인가?

• 상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다.

  import Common from "../../../../utils/common";
  

• 절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다.

  import Common from "src/utils/common";
  

 

설정 방법

• 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다.

  NODE_PATH=src/
  

• VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하고 아래 내용을 붙여넣습니다.

• {
    "compilerOptions": {
      "baseUrl": "."
    },
    "include": [
      "src"
    ]
  }
  

 

참조

• https://create-react-app.dev/docs/advanced-configuration/

• https://engineering.huiseoul.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-%EB%B3%80%EA%B2%BD-1485babb5198