ES6 Modules: Named Export vs. Default Export
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만 가능하다. 내보내기 되는 주체는 함수, 클래스, 객체 등 다양한 것이 될 수 있다. 이 값은
mainExported Value로 간주된다.
TroubleShooting 💫
Cannot use import statement outside a module오류가 발생하면 해당 JS파일이 모듈임을 명시해주어야 한다. 해결 방법은 아래와 같다.
- 최상단 html에
<script type=‘module’ src=‘directory’>명시하기 - package.json 파일에
”type”: “module”추가하기
글과 그림 ⓒ Wonkook Lee
References