React, 절대 경로 import

리액트를 사용하다보면 만들어 놓은 컴포넌트를 import 할 때

default 값이 상대경로이기 때문에 다음과 같은 경우를 마주하게 됩니다,,

import { Button } from '../../components';

 

디렉토리 구조가 복잡해질 경우 경로를 일일이 계산하는게 번거롭기 때문에

절대경로로 사용하는 편이 간단할 때도 있습니다.

 

절대경로로 설정하는 방법은 의외로 간단합니다.

 

1. JavaScript

1. 프로젝트 루트 디렉토리에 jsconfig.json 파일 하나를 먼저 만듭니다 (보통 만들어져 있다).

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

2. 생성한 json파일 안에 compilerOptions key 값에 "baseUrl": "src" 를 추가하여 src를 기준으로한 절대경로를 설정해줍니다.

 

3. 컴포넌트 디렉토리 위치가  src/component라고한다면

import { Button } from 'components';

다음과 같이 src를 기준으로 절대경로로 컴포넌트들을 import할 수 있습니다.

 

2. TypeScript

1. 위 과정에서 jsconfig.json -> tsconfig.json 파일명으로 변경하면 끝!

 

 

React Architecture Patterns for Your Projects