React 상대경로, 절대경로 사용하기

React(CRA) 에서는 웹팩과 바벨 설정이 기본적으로 되어 다른 파일을 가져오기 위해 import 를 사용할 수 있는데, 이때 경로를 지정하는 방법은 상대경로와 절대경로로 나뉜다.

 

상대경로

현재 import를 하는 파일의 위치를 기준으로 경로를 지정한다.

 

import Chicken from '../fastfood/chickens/chicken'

사용법은 다음과 같다

 

'/' : 루트(최상위 디렉토리)

'./' : 현재 디렉토리

'../' : 현재 위치에서 상위 디렉토리

  

위와같은 경로설정을 통해 가져오려는 파일의 위치를 적어주면 사용가능하다.

 

그러나 가져오려는 파일이 현재 위치에서 멀리있다면 어디있는지 가늠하기도 힘들고 보기에 복잡하다는 문제가 생기게 된다. 이럴때 절대경로를 사용한다면 불편함을 해소할 수 있게 된다. 

 

 

절대경로

디렉토리 구조가 깊어질 수록 사용하기 복잡한 상대경로와 달리 절대경로는 디렉토리 구조와 관계 없이 똑같은 방법으로 사용할 수 있다. 

 

import Chicken from 'src/fastfood/chickens/chicken'

 

React에서 절대경로 사용하기 : baseUrl 설정

tsconfig.json(typescript) 또는 jsconfig.json(javascript) 파일을 package.json 과 같은 디렉토리에 위치시켜 준다. 

 

 

이후 아래와 같이 작성해주면 절대경로 적용이 가능하다.

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

 

NODE_PATH는 쓰지 마세요!

과거 NODE_PATH를 src로 지정하여 사용하는 방법이 있었으나 이제는 더이상 지원하지 않는 방법이다

사용하지 않는 것을 권한다.