React Path alias 절대경로 설정

 

React에서 import를 할때 상대경로를 사용하는 경우가 많은데,

아래와 같이 상대경로가 복작한 경우가 많다.

import { Page } from '../../components/Container';
import UserPopup from '../../../components/popup/UserPopup';

 

이때 사용하는 것이 alias

 

craco, react-app-rewire-alias등 오픈 라이브러리가 있으니 골라서 사용하면된다.

다운수가 좀 더 많은 react-app-rewire-alias 사용

 

1. 설치

npm install --save-dev react-app-rewire-alias

 

2. config-overrides.js 파일 생성

const { alias } = require('react-app-rewire-alias');

module.exports = function override(config) {
  alias({
    '@': 'src', // 절대경로 설정
  })(config);

  return config;
};

 

3. import 경로 수정 - 상대경로를 절대 경로로 수정

import { Page } from '@/components/Container';
import UserPopup from '@/components/popup/UserPopup';

 

프로젝트 구성에 따라서,

@poup

@store

@route

등등 추가해서 사용하면 된다.

 

---

https://www.npmjs.com/package/react-app-rewire-alias

react-app-rewire-alias