TypeScript 모듈 시스템 완벽 가이드

TypeScript의 모듈 시스템을 처음부터 배워봅니다. export와 import의 다양한 방식, default export, named export 등 실무에서 자주 사용하는 모듈 패턴을 초급자 눈높이에서 설명합니다.

---

---

들어가며

이 글에서는 TypeScript 모듈 시스템 완벽 가이드에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Named_Export_기본
2. Default_Export
3. Import_별칭_사용하기
4. 모든_항목_가져오기
5. Named_와_Default_혼합
6. Re_export_패턴
7. Type_Export_Import
8. Dynamic_Import

---

1. Named_Export_기본

개요

여러 개의 함수나 변수를 개별적으로 내보낼 수 있는 방식입니다. 가장 기본적이고 많이 사용되는 export 방식입니다.

코드 예제

// utils.ts
export const add = (a: number, b: number) => a + b;
export const subtract = (a: number, b: number) => a - b;

// main.ts
import { add, subtract } from './utils';
console.log(add(5, 3)); // 8

설명

export 키워드를 사용해 함수를 내보내고, 중괄호를 사용해 필요한 것만 가져옵니다. 이름이 정확히 일치해야 합니다.

---

2. Default_Export

개요

모듈당 하나의 기본 값을 내보내는 방식입니다. 주로 클래스나 메인 함수를 내보낼 때 사용합니다.

코드 예제

// calculator.ts
export default class Calculator {
  multiply(a: number, b: number) {
    return a * b;
  }
}

// main.ts
import Calculator from './calculator';
const calc = new Calculator();

설명

default export는 중괄호 없이 가져오며, 원하는 이름으로 변경할 수 있습니다. 모듈당 하나만 가능합니다.

---

3. Import_별칭_사용하기

개요

as 키워드를 사용해 import한 항목의 이름을 변경할 수 있습니다. 이름 충돌을 방지하거나 더 명확한 이름을 사용할 때 유용합니다.

코드 예제

// math.ts
export const sum = (arr: number[]) => arr.reduce((a, b) => a + b);

// main.ts
import { sum as calculateTotal } from './math';
const total = calculateTotal([1, 2, 3, 4]);
console.log(total); // 10

설명

sum을 calculateTotal이라는 이름으로 가져와 사용합니다. 더 명확한 이름으로 변경하거나 충돌을 방지할 수 있습니다.

---

4. 모든_항목_가져오기

개요

별표(*)를 사용해 모듈의 모든 export를 하나의 객체로 가져올 수 있습니다. 많은 함수를 사용할 때 편리합니다.

코드 예제

// operations.ts
export const add = (a: number, b: number) => a + b;
export const multiply = (a: number, b: number) => a * b;

// main.ts
import * as ops from './operations';
console.log(ops.add(2, 3)); // 5
console.log(ops.multiply(2, 3)); // 6

설명

모든 export가 ops 객체의 프로퍼티로 들어갑니다. 네임스페이스처럼 사용할 수 있어 코드가 깔끔해집니다.

---

5. Named_와_Default_혼합

개요

하나의 모듈에서 default export와 named export를 함께 사용할 수 있습니다. 실무에서 자주 사용되는 패턴입니다.

코드 예제

// user.ts
export default class User {
  name: string;
  constructor(name: string) { this.name = name; }
}
export const USER_ROLE = { ADMIN: 'admin', USER: 'user' };

// main.ts
import User, { USER_ROLE } from './user';

설명

default export는 중괄호 없이, named export는 중괄호 안에 작성합니다. 두 방식을 동시에 사용할 수 있습니다.

---

6. Re_export_패턴

개요

여러 모듈을 하나의 진입점으로 모아서 다시 내보낼 수 있습니다. 라이브러리나 큰 프로젝트에서 API를 정리할 때 유용합니다.

코드 예제

// index.ts
export { add, subtract } from './math';
export { default as User } from './user';
export * from './constants';

// main.ts
import { add, User } from './index';

설명

여러 모듈의 export를 한 곳에서 다시 내보냅니다. 사용자는 하나의 파일에서 모든 것을 import할 수 있어 편리합니다.

---

7. Type_Export_Import

개요

TypeScript에서는 타입과 인터페이스도 export/import할 수 있습니다. type 키워드를 사용하면 타입만 가져온다는 것을 명확히 할 수 있습니다.

코드 예제

// types.ts
export interface User {
  id: number;
  name: string;
}
export type Status = 'active' | 'inactive';

// main.ts
import type { User, Status } from './types';
const user: User = { id: 1, name: 'Alice' };

설명

import type을 사용하면 컴파일 후 제거되는 타입만 가져옵니다. 런타임 번들 크기를 줄일 수 있습니다.

---

8. Dynamic_Import

개요

필요할 때만 모듈을 동적으로 불러올 수 있습니다. 코드 스플리팅과 성능 최적화에 유용합니다.

코드 예제

// main.ts
async function loadModule() {
  const module = await import('./heavy-module');
  module.heavyFunction();
}

// 버튼 클릭 시에만 로드
button.addEventListener('click', loadModule);

설명

import()는 Promise를 반환하므로 async/await와 함께 사용합니다. 필요한 시점에만 모듈을 로드해 초기 로딩 속도를 개선합니다.

---

마치며

이번 글에서는 TypeScript 모듈 시스템 완벽 가이드에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#TypeScript #Module #Export #Import #ES6