리액트 컴포넌트 import 시 절대경로와 상대경로 사용하기
상대경로
import Button from './components/Tabs';
상대경로 단점
상대경로 폴더가 깊어질때는 아래처럼 패스가 길어지게 된다. 😭
import Button from '../../../../components/Tabs';
절대경로로 import 하기
config파일 내 baseUrl 을 추가하면 아래처럼 절대경로로 import할 수 있다.
설정 변경시 IDE를 재실행 시켜줘야 제대로 작동한다.
tsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
import Button from 'components/Tabs';
절대경로 사용시 훨씬 깔끔하게 컴포넌트를 가져올 수 있다.
댓글