[React] 절대경로 import

 

 

 

 

import지옥

 

 

import Component from '../../../../../../../../components/PushComponent';

• React로 프로젝트를 개발하다보면 위와 같은 import지옥이 되는 경우가 많다.
• 실제 라우트 구조에 맞추어 페이지 컴포넌트를 제작하기 때문에 depth가 깊은 페이지에서 root폴더까지 올라가려면 어쩔 수 없는 상황이다.

 

 

 

# 절대경로

- 절대 경로는 어떤 상황에서도 변하지 않는 경로를 의미힌다.

- import를 선언하는 페이지의 위치와는 상관 없이 일관성 있는 경로를 작성하기 때문에 추후 파일위치가 변경되도 import를 다시 맞추지 않아도 되는 장점이 있다.

 

 

 

방법

• typescript프로젝트라면 tsconfig.json  /  javascript프로젝트라면 jsconfig.json 파일에 아래와 같이 작성한다.

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

• 절대경로의 진입점을 compilerOptions/baseUrl에 작성하고, 불러 올 폴더를 include에 작성하면 된다.

 

 

 

 

src/components/Note.js에 있는 모듈을 가져오려면 다음과 같이 이 모듈을 가져 올 수 있다.

import Note from 'components/Note';

 

 

 

 

 

 

 

참조

https://create-react-app.dev/docs/importing-a-component/#absolute-imports