[react] 상대경로 vs 절대경로

상대경로

import를 할 때 상대경로로 파일을 가져오려면 파일 구조를 잘 알고 있어야 합니다. 예로 다음과같은 프로젝트가 있다고 가정해보겠습니다.

현재 디렉토리의 깊이에 따른 파일과 폴더를 정리해보면 다음과 같은데요.

📁 depth0

폴더: src

📁 depth1

폴더: a,b, img / 파일: App.css

📁 depth2

폴더: c / 파일: a1,a2

📁 depth3

파일: c1

import하려는 파일의 위치에 따라 어떻게 상대경로를 설정 하는 지 3가지로 경우로 나눠 설명하겠습니다.

1. 동일 폴더 내 파일

같은 폴더내 파일을 가져올 땐 ./뒤에 파일명을 입력하면 됩니다. 예를 들어 a1이 a2을 import하려면 파일 상단에 다음과 같이 코딩하시면 됩니다.

import a2 from './a2'

2. 외부 폴더에 있는 파일

폴더 외부의 파일을 가져올 땐 가져올 파일이 속한 폴더의 depth를 살펴보셔야 합니다. 만약 지금 내 파일의 폴더 보다 상위 depth라면 depth만큼 ../를 추가해주셔야 합니다.

예를 들어 c1에서 App.css를 import한다고 해봅시다.

c1의 폴더 c는 depth2고, App.css의 폴더 src는 depth0입니다. import하려면 다음과 같이 코딩하셔야 합니다.

import App from '../../App'

❗ 주의

파일이 속한 폴더는 이해하기 쉽게 상위 폴더 하나만 명시했지만 사실 c1은 depth0~depth2까지 src/b/c/c1의 파일구조를 갖고 있습니다.

🤔 그런데 이렇게 경로를 정하면 너무 복잡한데요?

그럴땐 절대경로를 사용하시면 됩니다.

절대경로

리액트 package.json과 동일한 디렉토리에 jsconfig.json을 만들고 다음과 같은 내용으로 코딩해주세요.

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

그리고 개발툴을 재실행하면 src를 기준으로 경로를 작성하실 수 있습니다.