[React] 절대 경로 설정(feat. Absolute imports)

1. 절대 경로 설정 방법

React에서 컴포넌트나 파일 등을 import 할 때 보통 상대 경로를 작성한다. 예시를 들자면, 아래와 같은 src 구조를 갖고 있고 Profile.js 파일에서 Home.js, Router.js 파일로부터 무언가를 import 하고 싶을 땐 그 아래의 코드처럼 작성하면 된다. 

import Home from "./routes/Home"
import AppRouter from "../components/Router"

...

하지만 파일과 디렉터리가 많아지면 import를 작성하는 과정에서 상대적인 위치를 헷갈리면서 오류가 발생할 수 있다. 이를 조금이나마 방지하고자 절대 경로로 작성하는 경우도 있는데, React에서 절대 경로를 이용할 경우는 src와 같은 디렉터리 단계(React 프로젝트 디렉터리 바로 하위 단계)에서 jsconfig.js 또는 tsconfig.js 파일을 작성함으로써 가능하다.

그리고 jsconfig.json 또는 tsconfig.js 파일의 내용은 아래와 같이 작성하면 된다.

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

 

 

2. 참고

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

Importing a Component | Create React App