안녕하세요. 개발을 하다 보면 폴더와 파일이 깊어지는 경우가 있습니다.
import MainComponent from '../../../components/MainComponent';
import LoginComponent from '../../../components/LoginComponent';
이런 식으로 ../../ 이 많아지면 복잡해집니다.
하지만 절대 경로를 사용하면
import MainComponent from 'components/MainComponent';
import LoginComponent from 'components/LoginComponent';
이런 식으로 줄일 수 있습니다.
그래서 오늘은 절대 경로 설정 방법에 대해 알아보도록 하겠습니다.
먼저 라이브러리를 설치해줍니다.
$ npm install babel-plugin-module-resolver -D
babel.config.js 파일에 들어가줍니다.
(babel.config.js 스크린샷)
아래의 코드를 복사한 뒤 붙혀 줍니다.
"plugins": [
[
"module-resolver",
{
"root": ["./src"],
"extensions": [".js", ".ios.js", ".android.js"]
}
]
]
(root 부분에 원하는 경로를 넣으시면 됩니다. 저는 /src를 root로 설정했습니다)
(babel.config.js파일 스크린샷)
/src/components/MainComponent
이제 부터는 위 경로에 import를 하려면 아래와 같이 작성하시면 됩니다.
import MainComponent from 'components/MainComponent';
import LoginComponent from 'components/LoginComponent';
'ReactNative > 개발' 카테고리의 다른 글
| [React Native]-Sticky (0) | 2019.11.24 |
|---|---|
| [React Native]-Scroll To (0) | 2019.11.24 |
| [React Native]-상태 바(Status Bar) 높이 구하기 (0) | 2019.11.17 |
