ESM

named Export

한 파일 내에서 여러 변수/함수 들을 export 하는 방법이다. export 된 이름과 동일하게 설정해야 한다.

export const hi = 'Hello, world!';

export function func() {
  console.log('Hello, world!');
}

...
...

import { hi, func } from './module.js';

console.log(hi); // 'Hello, world!'
func(); // 'Hello, world!'

만약 선언한 변수 이름과 다르게 하여 사용하고 싶다면 import 에서 as 를 사용해야한다.

export const hi = 'Hello, world!';

export function func() {
  console.log('Hello, world!');
}

...
...

import { hi as h } from './module.js';

console.log(h) // 'Hello, world'

default export

한 파일 내에서 한 개의 값만을 export 하는 방법이다. import 시에는 한개의 변수/함수만 export 하는 경우라면 import 호출 시 어떤 이름을 사용해도 상관 없다.

const hi = 'Hello, world!';

function func() {
  console.log('Hello, world!');
}

export default hi;

...
...

// import hi from './module.js';
import asdf from './module.js';

// console.log(hi) // 'Hello, world';
console.log(asdf) // 'Hello, world';

export default를 통해서 여려 변수/함수를 export 하는 방법도 있다. 하나의 객체를 통해 export 하는 것이다. 이 경우 import 사용방식은 named export와 비슷해진다.

const hi = 'Hello, world!';

function func() {
  console.log('Hello, world!');
}

export default {hi,func}

...
...

// import module from './module.js';
import { hi, func } from './module.js';

// console.log(module.hi); // 'Hello, world';
console.log(hi) // 'Hello, world';

import *

지정된 모듈의 모든 변수/함수를 가져온다. 가져와야 하는 변수/함수가 많은 상황에서 모듈을 가져오는 과정을 쉽게 작성할 수 있다는 장점이 있다.

export const hi = 'Hello, world!';

export function func() {
  console.log('Hello, world!');
}

...
...

import * as module from './module.js';

console.log(module.hi) // 'Hello, world'
console.log(module.func) // 'Hello, world'

모듈 왜 사용하는가

• 빌드하면 스크립트 불러오는 순서에 맞게 실행시킬 수 있다.
• 모듈 스코프를 통해 변수 및 함수 재선언을 방지한다.
• 다이나믹 import의 경우면 어플리케이션 최적화에 도움을 주기도 한다.

참고
Export Default 과연 제대로 알고계십니까?
ES modules - 만화로 보는 심층 탐구
import / export