import/export — 모듈 시스템의 핵심

이 토픽을 마치면

ES Module의 import/export 문법을 이해하고, 코드를 적절히 분리하는 방법을 알게 됩니다.

모든 코드를 한 파일에 쓰면

초기 JavaScript는 모든 코드를 하나의 파일에 넣었습니다. 파일이 커지면 변수 이름이 충돌하고, 코드를 찾기 어렵고, 재사용도 안 됩니다.

**모듈(Module)**은 코드를 파일 단위로 나누고, 필요한 것만 내보내고 가져오는 시스템입니다.

export: 내보내기

파일에서 다른 곳에서 쓸 수 있게 내보내는 두 가지 방법이 있습니다.

Named export — 이름을 지정해서 내보냅니다:

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

export const MAX_ITEMS = 100;

한 파일에서 여러 개를 내보낼 수 있습니다.

Default export — 파일당 하나의 기본 내보내기:

// Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

import: 가져오기

Named export는 중괄호로 가져옵니다:

import { formatDate, MAX_ITEMS } from "./utils.js";

이름이 정확히 일치해야 합니다. 이름을 바꾸고 싶으면 as를 씁니다:

import { formatDate as format } from "./utils.js";

Default export는 중괄호 없이 가져옵니다:

import Button from "./Button.js";

이름을 자유롭게 지을 수 있습니다:

import MyButton from "./Button.js"; // 같은 것

Named vs Default

// Named — 여러 개 내보내기, 이름 고정
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }

import { add, sub } from "./math.js";

// Default — 하나 내보내기, 이름 자유
export default function Calculator() { ... }

import Calculator from "./Calculator.js";
import Calc from "./Calculator.js"; // 이름 자유

실무에서의 관례:

• React 컴포넌트: default export (파일당 하나의 컴포넌트)
• 유틸 함수, 상수: named export (한 파일에 여러 개)

둘 다 같이 쓸 수도 있습니다:

import React, { useState, useEffect } from "react";

React는 default, useState와 useEffect는 named입니다.

전체 가져오기

파일의 모든 named export를 한 번에 가져올 수 있습니다:

import * as utils from "./utils.js";

utils.formatDate(new Date());
utils.MAX_ITEMS;

하지만 필요한 것만 가져오는 게 좋습니다. 번들러가 사용하지 않는 코드를 제거(tree-shaking)할 수 있기 때문입니다.

핵심

export로 내보내고 import로 가져옵니다. Named export는 중괄호, default export는 중괄호 없이 가져옵니다. 컴포넌트는 default, 유틸/상수는 named export가 일반적입니다.