Import 경로 관리

절대 경로 설정

프로젝트 규모가 커지면서 '../../../'의 반복을 줄이고, 직관적으로 모듈이 속해있는 디렉토리 경로를 보기 위한 설정을 시작해보자.

jsconfig.json

해당 파일이 위치한 디렉토리가 JavaScript 프로젝트의 루트임을 나타내는 경우에 다양한 컴파일러 옵션을 정의하여 사용한다.

설정하기

// src/jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

설정 전

import Test from "../../test/Test";

설정 후

import Test from "test/Test";

export .. from 사용

절대 경로로 설정하더라도 내부에 중첩된 디렉토리가 많다면 import 코드가 길어질 수 밖에 없기 때문에 이러한 부분을 해소하기 위해 디렉토리별 index.js 파일을 생성하여 import 경로 간소화가 가능하다.

index.js

// 예시 경로 - src/components/test
// index.js 파일 위치 - src/components

export { default as Table } from './datatable/Table';
export { default as TestTableContainer } from './test/TestTableContainer';

여기서 주의해야 할 점은 해당 컴포넌트의 export 형식에 따라 정의하는 방식이 다르다는 점이다. 아래 예시를 보자.

named export

// 일반함수형 컴포넌트
function TestComponent () {}
export TestCOmponent;

// 화살표 함수형 컴포넌트
export const TestComponent = () => {}

위와 같이 named export를 할 경우 하나의 파일 내에서 여러개의 export가 적용되지만 호출 시 아래와 같이 호출하여야한다.

// jsconfig.json 설정을 했다고 가정
import { TestComponent } from 'components/test';

여기서 export from을 사용하면 다음과 같이 작성해야한다.

export * from './test/TestComponent';

default export

...함수 정의 생략(위와 동일)

export default TestComponent();

default export를 할 경우 하나의 파일에서 한 개의 default만을 export 할 수 있다.(default 한개에 named export 여러개는 가능) 이런 경우에는 아래와 같이 호출한다.

import TestComponent from 'components/test';

export from은 다음과 같이 작성한다.

export { default as TestComponent } from './test/TestComponent';

호출

import { TestComponent } from 'components';

위와 같이 index.js가 위치한 디렉토리명을 적는 것만으로도 import가 완료되어 간결하게 사용이 가능하다.