[React] 절대경로 설정하기 (create-react-app)

create-react-app을 사용하면서 코드를 좀 더 깔끔하게 보이도록 하기 위해 절대 경로로 import가 필요할 때가 있다.

공식 문서는 여기에서 볼 수 있다.

 

1. jsconfig.json 파일 생성

jsconfig.json 파일을 프로젝트 root 폴더에 생성해준다. 만약 TypeScript를 사용한다면 tsconfig.json로 생성하면 된다.

 

2. 내용 작성

 앞서 생성한 jsconfig.json파일을 열고 다음과 같이 작성해준다.

 

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

 

 이제 src 폴더를 기준으로 절대경로를 사용할 수 있게 된다.

 

//기존 상대 경로 방식
import "./components/somthing";

//잘못된 절대 경로 방식
import "/components/somthing";


//올바른 절대 경로 방식
import "components/something";