리액트 컴포넌트 절대경로 import

리액트 컴포넌트 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';

 

절대경로 사용시 훨씬 깔끔하게 컴포넌트를 가져올 수 있다.