기본 내보내기 vs. 이름 지정 내보내기

Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 10번째.

JavaScript 모듈에서는 코드를 내보내는 두 가지 주요 방법인 이름을 지정한 내보내기(named exports)와 기본 내보내기(default exports)가 있습니다.

명명된 내보내기(Named Exports)를 사용하면 모듈에서 여러 개의 값을 내보낼 수 있습니다:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

이름을 지정한 내보내기(named exports)를 가져올 때는 중괄호 안에 정확히 동일한 이름을 사용해야 합니다:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

이름이 지정된 임포트(named import)의 이름을 변경해야 하는 경우, as 키워드를 사용하여 별칭(alias)을 만드세요:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

기본 내보내기(Default Exports)를 사용하면 모듈에서 하나의 주요 값을 내보낼 수 있습니다:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

default export를 가져올 때, 중괄호 없이 원하는 이름을 사용할 수 있습니다:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

언제 무엇을 사용해야 할까요? 모듈이 여러 개의 관련된 유틸리티(예: 헬퍼 함수 모음)를 제공할 때는 명명된 내보내기(named exports)를 사용하세요. 모듈에 하나의 주요 목적이나 주요 값(예: 클래스, 컴포넌트 또는 설정 객체)이 있을 때는 기본 내보내기(default export)를 사용하세요.

단일 모듈에서 두 가지 유형의 내보내기(export)를 모두 결합할 수 있습니다:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

그리고 이들을 함께 가져옵니다:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

챌린지

쉬움

두 개의 파일이 있습니다. 여러분의 작업은 calculator.js에서 내보내기(exports)를 설정하고 main.js에서 가져오기(imports)를 설정하는 것입니다.

calculator.js에서: calculate를 default로, square를 named로 내보내세요.
main.js에서: 두 함수를 모두 올바르게 가져오세요.

테스트 확인 사항:

calculate에 기본 내보내기(Default export)가 사용되었는지 여부
square에 명명된 내보내기(Named export)가 사용되었는지 여부
두 가져오기(imports)가 모두 올바르게 작동하는지 여부

치트 시트

명명된 내보내기 (Named Exports) — 정확한 이름으로 여러 값을 내보내고 가져옵니다:

// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// app.js
import { add, subtract } from './math.js';
import { add as sum } from './math.js'; // "as"를 사용한 별칭

기본 내보내기 (Default Exports) — 하나의 주요 값을 내보냅니다. 중괄호 없이 어떤 이름으로든 가져올 수 있습니다:

// user.js
export default { name: 'John', age: 30 };

// app.js
import person from './user.js';

둘 다 결합하기 — 기본 가져오기가 먼저 오고, 명명된 가져오기는 중괄호 안에 옵니다:

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

// app.js
import myCar, { wheels } from './vehicle.js';

각각 언제 사용해야 하는가: 관련된 여러 유틸리티에는 명명된 내보내기를 사용하세요. 모듈의 단일 주요 값(클래스, 컴포넌트, 설정 등)에는 기본 내보내기를 사용하세요.

직접 해보기

// TODO: calculator.js에서 두 함수를 모두 여기로 가져오세요


// 테스트
console.log(calculate(10, 5, '+')); // 15가 출력되어야 함
console.log(square(4));             // 16이 출력되어야 함