[React] root로 import 하기 (절대경로로 import)

React 프로젝트를 진행하다 보면 component를 나누고 각 component 를 import 하여 사용하게 된다.

component 뿐만 아니라 각각의 library 들도 커스텀하게 사용되는 경우가 많은데 이를 사용하기 위해 보통

import {} from 'path'

이런식으로 사용하게 된다.

 

실제 사용 예

./components/containers/shop/DownloadCatalog.jsx

import React, { useState } from 'react';

import Catalogs from '../../components/shop/Catalogs';

import dummyItems from '../../data/catalogs';

const DownloadCatalog = () => {
    const [products] = useState(dummyItems);

    return (
        <Catalogs products={products} />
    );
};

export default DownloadCatalog;

 

위와 같이 Catalogs 를 import 하려고 할 때 상대경로를 사용하여 Catalogs 를 가져오게 되는데 처음에는 이런방식이 되게 편리하다

하지만 만약 DownloadCatalog.jsx 에 위치가 이동 되면 이 절대경로는 바뀌기 마련이다.

예를 들어 ./components/containers/shop/downloads/DownloadCatalog.jsx

로 이동하게 되면 파일은 다음과 같이 수정되어야한다.

import React, { useState } from 'react';

import Catalogs from '../../../components/shop/Catalogs';

import dummyItems from '../../../data/catalogs';

const DownloadCatalog = () => {
    const [products] = useState(dummyItems);

    return (
        <Catalogs products={products} />
    );
};

export default DownloadCatalog;

 

상대 경로가 한뎁스 더 추가된것을 볼 수 있다. 따라서 파일구조를 쉽게 바꾸지 못하게 되고 바꾸게 되더라도 계속해서 코드를 수정해줘야하는 번거로움이 있다. 이를 해결하기 위해 import 를 할 때에 상대경로가 아닌 절대경로를 사용하게끔 하면 사용성이 증가하게 된다.

1. babel 모듈 추가

$npm install babel-plugin-root-import --save-dev

2. .babelrc 수정

{
  "presets": [
	...
  ],
  "plugins": [
	...
    ["babel-plugin-root-import", { "rootPathPrefix": "@/", "rootPathSuffix": "./" }]
  ]
}

3. webpack 수정

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  ...
};

4. jsconfig.json 또는 tsconfig.json 수정 

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

위와 같이 수정한 뒤 

./components/containers/shop/downloads/DownloadCatalog.jsx

import React, { useState } from 'react';

import Catalogs from '@/components/shop/Catalogs';

import dummyItems from '@/data/catalogs';

const DownloadCatalog = () => {
    const [products] = useState(dummyItems);

    return (
        <Catalogs products={products} />
    );
};

export default DownloadCatalog;

 

이렇게 @ 로 절대경로를 표시하면 잘 동작하는것을 확인 하 실수 있습니다!