Named Export와 Default Export의 이해

Named Export

Named Export는 모듈에서 여러 개의 변수, 함수, 클래스를 내보낼 때 사용한다. 각각의 내보낸 요소들은 이름을 가지고 있으며, 이를 통해 선택적으로 필요한 부분만 가져올 수 있다.

예를 들면, 다음과 같이 코드를 작성한다.

typescript

// utils.js
export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

export class Calculator {
  subtract(a, b) {
    return a - b;
  }
}

위와 같이 export를 하면, 사용하는 곳에서는 아래와 같이 import 할 수 있다.

typescript

// main.js
import { PI, add, Calculator } from './utils.js';

console.log(PI); // 3.14
console.log(add(2, 3)); // 5

const calc = new Calculator();
console.log(calc.subtract(5, 2)); // 3

Default Export

Default Export는 모듈에서 단 하나의 기본값을 내보낼 때 사용한다. 모듈당 하나의 Default Export만 가질 수 있으며, 가져올 때 이름을 지정할 수 있다.

아래 처럼 export 하고,

typescript

// logger.js
export default function log(message) {
  console.log(message);
}

다음과 같이 import 한다.

typescript

// app.js
import log from './logger.js';

log('안녕하세요!'); // 안녕하세요!

주요 차이점

export 개수
- Named Export: 여러 개 가능
- Default Export: 모듈 당 하나만 가능
import 문법
- Named Export: import { name1, name2 } from './module';
- Default Export: import anyName from './module';
이름 변경
- Named Export: import { originalName as newName } from './module';
- Default Export: 가져올 때 자유롭게 이름 지정 가능
전체 가져오기
- Named Export: import * as moduleName from './module';
- Default Export: 이미 하나의 객체로 취급되므로 전체 가져오기 불필요
동적 가져오기
- Named Export: import('./module').then(module => module.namedExport)
- Default Export: import('./module').then(module => module.default)

언제 어떤 것을 사용해야 할까?

Named Export: 모듈에서 여러 개의 유틸리티 함수나 변수를 내보내고, 이를 선택적으로 가져와 사용하고 싶을 때 유용하다.
Default Export: 모듈의 주요 기능이나 클래스를 내보낼 때 사용하면 좋다.

Avoid Export Default

해당 문서에서는 Export Default를 사용하는 것을 지양하라고 한다. (적어도 타입스크립트 프로젝트에서는?) 주요 이유는 아래와 같다.

이름 변경 미지원

IDE에서 리팩토링 기능을 통해 이름을 변경할 때, 자동으로 변경해주지 않는다. 예를 들어, TestComponent의 이름을 TestComponent2 로 바꿔도, import 하는 부분에서는 바뀌지 않는다. 그러나 Named Export를 사용할 경우는 잘 바꿔준다.

이름 변경의 자유로움으로 인한 일관성 부족

default export를 사용하면 가져올 때 아무 이름이나 사용할 수 있어, 같은 모듈을 다른 파일에서 다른 이름으로 사용할 수 있다.
이는 코드의 일관성을 해치고 혼란을 야기할 수 있다.

타입 정보의 부족

default export는 타입 정보를 제공하지 않아, 어떤 타입의 객체나 함수가 내보내지는지 명확하지 않을 수 있다.