[React] 절대 경로 (Absolute Imports)

Absolute Imports란?

React로 프로젝트를 개발하다보면  ../../../../components/Basic과 같은 import 지옥이 되는 경우가 잦습니다. 절대경로는 이름 그대로 어떤 상황에서도 변하지 않는 경로를 의미합니다. import를 선언하는 페이지의 위치와는 상관 없이 일관성 있는 경로를 작성하기 때문에 추후 파일 위치가 이동해도 import를 다시 맞추지 않아도 되는 장점이 있습니다.

 

적용 방법

CRA(create-react-app)으로 프로젝트를 만들었다고 가정했을 때 보통 src 파일안에 소스코드가 있기 마련입니다.

그러니 jsconfig.json을 통해서 이 src 폴더를 루트 폴더로 지정하기만 하면 됩니다.

JavaScript 프로젝트라면 jsconfig.json파일을 아래와 같이 작성합니다.

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