[JavaScript - 27] 모듈(module) - export / export default

export와 export default는 JavaScript의 ES6 모듈 시스템에서 사용되는 두 가지 주요한 내보내기 방식입니다. 

각각의 특징과 차이점을 살펴보겠습니다.

export

이름이 있는 내보내기(Named Exports)로 여러 개의 항목을 동일한 모듈에서 내보낼 수 있습니다.
해당 모듈을 가져올 때 { }를 사용하여 구체적인 이름으로 가져올 수 있습니다.

// module.js
export const foo = 'foo';
export const bar = 'bar';

// app.js
import { foo, bar } from './module.js';

 

---

export default

모듈당 오직 하나의 기본 내보내기(Default Export)만 가능합니다.
{ } 없이 가져올 수 있으며, 가져오는 측에서 원하는 이름을 사용할 수 있습니다.

// module.js
export default function() {
    console.log('This is a default export!');
}

// app.js
import anyNameYouWant from './module.js';  // 이름을 자유롭게 지정할 수 있습니다.

---

다중 내보내기

동일한 모듈에서 export와 export default를 함께 사용할 수 있습니다.

// module.js
export const foo = 'foo';
export default function() {
    console.log('Default export');
}

// app.js
import defaultFunction, { foo } from './module.js';