일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 영화
- 영화감상
- Express
- git
- nodejs
- 디자인패턴
- 드릴
- 엄티로드
- REACT
- development
- 개발
- JavaScript
- 주짓떼로
- graphQL
- 자바스크립트
- 리액트
- Node
- 영화리뷰
- web
- 개발자
- 주짓떼라
- 솔로드릴
- Redux
- 하프가드
- 프로그래밍
- 주짓수
- 웹개발
- 클로즈가드
- 파이썬
- 노드
- Today
- Total
As i wish
[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;
이렇게 @ 로 절대경로를 표시하면 잘 동작하는것을 확인 하 실수 있습니다!
'React JS' 카테고리의 다른 글
[React] root로 import 하기 (절대경로로 import) - CRA 모드 (0) | 2020.02.12 |
---|---|
[React] CRA (Create-react-app) 에 typescript 적용하기 (0) | 2020.01.25 |
[React] CRA (Create-react-app) 에 eslint, prettier 적용하기 (0) | 2020.01.25 |
React + Firebase Realtime Database (1) | 2020.01.16 |
Styled-component 에 props 로 style 적용 (0) | 2020.01.01 |