절대 경로 import

디렉토리 별칭 등록

앱 구조가 복잡해지면 상대 경로를 사용해 컴포넌트를 호출할 때 상당히 괴롭습니다.

import AppCalendar from '../../../../../../../components/ui/Calendar'

CRA는 절대 경로를 사용할 수 있는 기능을 제공하므로 보다 손쉽게 컴포넌트를 호출할 수 있습니다. 프로젝트 루트 위치에 jsconfig.json 파일을 생성한 후 다음 코드를 작성합니다.

jsonfig.json

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

기본 URL 설정이 src 디렉토리가 되므로 src 디렉토리 기준 절대 경로를 사용하여 컴포넌트를 불러올 수 있습니다.

import AppCalendar from 'components/ui/Calendar'

다른 모듈(예: node_modules 디렉토리 안에 포함된 설치 모듈)과 충돌이 염려된다면 특수 문자(예: @)를 사용해 디렉토리 별칭을 등록할 수도 있습니다. paths 항목을 추가한 다음 디렉토리 별칭을 등록합니다.

jsonfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"],
  "paths": {
    "@components": ["./components/*"]
  }
}

등록된 별칭으로 디렉토리 명을 입력해 컴포넌트를 호출하면 다른 NPM 모듈과 충돌 문제를 방지할 수 있습니다.

import AppCalendar from '@components/ui/Calendar'