[React] 절대경로 사용하기

한 파일에서 다른 파일을 가져오기 위해서 import 구문을 사용합니다.

import를 할 때, 상대 경로를 사용하다보면 파일 위치가 멀 경우 긴 경로를 사용하기도 합니다.

import Header from '../../../../../../../directory/Header';

 

이렇게 되면 어떤 디렉토리에 있는 어떤 파일인지 한번에 가늠하기 어렵고,

폴더를 찾는데에 긴 시간을 들일 수도 있습니다.

 

이러한 상황을 방지하기 위해 절대경로를 사용하여 import 하는 방법에 대해 정리해보도록 하겠습니다!

절대 경로를 사용하는 방법은 간단하며 문서를 통해서도 빠르게 확인해볼 수 있습니다.

 

javascript를 사용하는 프로젝트라면 jsconfig.json에, typescript를 사용하고 있다면 tsconfig.json에 아래의 속성 몇가지만 추가하면 됩니다.

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

 

이렇게 추가하고 나면 아래와 같이 src 디렉토리 기준으로 절대 경로로 파일을 import 해올 수 있습니다.

import Header from 'component/Header';