ES6 Modules: Named Export vs. Default Export

Wonkook Lee·2021년 9월 18일

ES6 WeCode export default modules 모듈 위코드

JavaScript | Intermediate

목록 보기

2/6

ES6는 import/export 문법으로 모듈을 가져와 다른 파일에서 사용할 수 있다. 파일에서 모듈을 내보내는 두 가지 방법이 있는데, 이름이 지정된 내보내기(Named Export)와 기본 내보내기(Default Export)이다.
이 두가지 방법의 차이점은 무엇인지 명확히 하는 것을 넘어 JS의 모듈 개념에 대해 간단히 알아보았다.

TL;DR ⚡️

Named Export 특징
- 한 파일 내에서 여러개의 변수/클래스/함수를 Export 할 수 있다.
- Import할 때 as 키워드를 사용해서 다른 이름을 지정할 수 있다.
Default Export 특징
- 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다.
- from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 있다.

사전 지식 📚

자바스크립트의 모듈(Module)이란?

모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일을 말한다. 모듈 개념을 활용은 아래의 장점이 있다.

유지보수성 : 기능별로 코드를 모듈화하면 해당 기능에 대한 수정과 관리에 용이하다.
네임스페이스화: 모듈과 함께 네임스페이스를 분리하여 전역 공간에서 코드의 이름이 겹치는 문제를 해결할 수 있다.

네임스페이스란?
이름들을 한곳에 모아 충돌을 미리 방지하고, 해당 이름으로 선언된 변수와 함수를 쉽게 가져다 쓸 수 있는 인위적인 공간을 말한다.
자바스크립트는 네임스페이스 기능이 따로 없는 대신 객체 리터럴과 즉시 실행 함수(IIFE)를 통해 그 기능을 구현할 수 있다.
네임스페이스의 분류
빌트인(Built-in) 네임스페이스 > 전역(Global) 네임스페이스 > 지역(Local) 네임스페이스
재사용성: 모듈을 분리시킴으로써 반복 없는 재사용이 가능하다.

자바스크립트에서 모듈을 구현하기 위한 방법들

AMD(Asynchronous Module Definition)
가장 오래된 모듈 시스템으로, require.js라는 라이브러리를 통해 처음 개발되었다.
CommonJS
Node.js 서버를 위해 만들어진 모듈 시스템이다.
UMD(Universal Module Definition)
AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌다.
ES6 (ES2015)
JavaScript의 모듈화가 가능하도록 ES6부터 도입된 방식, 각각의 모듈(파일)마다 독립적인 파일 스코프를 가지고 있어 스코프의 충돌을 방지할 수 있다.

Named Export와 Default Export의 차이 🧐

[1] Named Export: (export)

명명된 내보내기를 사용하면 파일당 여러개의 명명된 내보내기를 가질 수 있다.
그런 다음 중괄호로 묶인 특정 내보내기를 가져온다. 가져온 모듈의 이름은 내보낸 모듈의 이름과 같아야 한다.

// import
// e.g. Importing a Single Named Export
import { MyComponent } from './MyComponent'

// e.g. Importing Multiple Named Exports
import { MyComponent, MyComponent2 } from './MyComponent'

// e.g. Giving a Named Import a Different Name by Using 'as'
import { MyComponent2 as MyNewComponent } from './MyComponent'

// Exports from ./MyComponent.js file
export const MyComponent = () => { ... }
export const MyComponent = () => { ... }

Export된 파일 내 모든 요소를 하나의 객체로 가져오는 방법

import * as MainComponents from './MyComponent'

모든 것을 하나의 객체에 담아 가져오면, 별도로 설정한 이름에 Dot 또는 Bracket Notation으로 객체 접근해서 프로퍼티와 메소드를 사용한다.

import * as testComponent from './test.js'

console.log(testComponent.getNumber())
console.log(testComponent.getString())
console.log(testComponent.getBoolean())
console.log(testComponent["getNumber"]())
console.log(testComponent["getString"]())
console.log(testComponent["getBoolean"]())

[2] Default Export: (export default)

하나의 파일당 하나의 변수 또는 클래스만 Export할 수 있다.

// import
import MyDefaultComponent from './MyDefaultExport'

// export
const MyComponent = () => { ... }
export default MyComponent

한 파일당 하나의 모듈만 Export되기 때문에, Import 할 때 이름은 Export하는 이름과 상관 없이 원하는 이름을 사용할 수 있다.

언제 어떤 것을 사용해야 할까?

Named Export는 여러 값을 내보내는데 유용하다. 모듈을 가져올 때 동일한 이름을 사용해야만 해당 값을 참조할 수 있다.
Default Export는 모듈당 하나의 Export만 가능하다. 내보내기 되는 주체는 함수, 클래스, 객체 등 다양한 것이 될 수 있다. 이 값은 main Exported Value로 간주된다.