[React] 모듈 import 시 상대 경로의 복잡성 줄이는 법

 

import Header from '../../../../ ... '

위와 같은 상대 경로의 복잡성을 해결하고자 한다.
대부분의 JavaScript 프로젝트 구성 도구(ex. Webpack, Babel)는 절대 경로를 사용하여 모듈을 임포트할 수 있는 설정을 제공한다. 이 방법을 사용하면 더이상 상대 경로에 의존하지 않고 모듈을 임포트할 수 있다.

 

Create React App (CRA)를 사용하는 경우

jsconfig.json 파일을 루트 디렉토리에 생성하고 다음과 같이 작성한다.

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

 

이 설정은 src 디렉토리를 기준 경로로 설정한다.