[React] CRA에서 모듈 import 시 절대경로 사용하기

절대경로 설정

최상위 루트 폴더에 jsconfig.json 파일을 생성한 뒤, 아래 코드를 붙여넣어 준다.

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

TypeScript를 쓰는 경우엔 기존 tsconfig.json 파일에서 compilerOptions 설정을 수정하면 된다.

 

ES6 모듈 import 시 현재 파일 위치 기준의 상대경로(../ ./)가 아닌

src 폴더를 기준으로 한 절대경로를 사용할 수 있다.

 

사용 예시

Home.js에서 Button 컴포넌트를 불러온다면,

상대경로 👉 import Button from '../components/Button'

절대경로 👉 import Button from 'components/Button'

 

Reference>

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

Importing a Component | Create React App