[React] import path에 상대 경로를 절대 경로로 변경하기

src 하위 폴더의 파일에서 상대 경로로 다른 폴더의 파일에 접근할 때 폴더 구조가 복잡하고 깊은 경우
../../components/A 형태로 ../이 많이 사용되고 가독성이 떨어진다.

import A from '../../components/A';
import CommonB from '../../components/common/B';
import commonStyle from '../../lib/styles/common';

절대 경로를 사용하면 특정 폴더를 기준으로 import path를 설정할 수 있다.

1. 최상위 폴더 아래에 jsconfig.json (typescript인 경우 tsconfig.json) 파일을 생성한다
2. baseUrl 설정을 추가한다. 아래의 경우 src 폴더를 기준으로 절대 경로를 사용할 수 있다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

// 이전 
import A from '../../components/A';

// baseUrl 추가 후
import A from 'components/A';

출처

• Absolute imports in Create React App