[ES 6] 모듈이란?

1. ES6 새로운 모듈 구현 방법

 

 ES6 모듈은 ES6부터 신설된 모듈 시스템이고 자바스크립트 언어 자체에 내장된 표준 모듈이다. 비교적 구문이 간결하고 성능이 우수하며 많은 최신 API가 ES6 모듈로 패키징되고 있다.

 

A. 모듈 Export

 

- ES6 모듈은 변수, 함수, 클래스, 기타 엔티티를 익스포트할 수 있다.

 

 모듈에서 익스포트 시 사용하는 export 구문은 아래와 같은 형식들이 있다.

 

export {a}; // 1
export {a, b}; // 2
export {a as variableA}; // 3
export {a as default}; // 4
export default function () {}; // 5
export {c, d} from "myAnotherModule"; // 6
export * from "myAnotherModule"; // 7

 

 1 - 변수 또는 객체를 익스포트한다.

 2 - 변수 또는 객체를 여럿 익스포트한다.

 3 - 변수 또는 객체를 다른 이름(별명 alias)으로 익스포트한다.

 4 - 변수 또는 객체를 기본 별명을 쓴다.

 5 - 4번째 형식과 비슷하나 변수 이름 대신 표현식을 넣는다.

 6 - 하위 모듈에서 익스포트한 변수를 익스포트한다.

 7 - 하위 모듈에서 익스포트한 모든 변수를 익스포트한다.

 

 ** 익스포트는 모듈 내에서 무제한으로 쓸 수 있지만, if else 조건문같은 곳에서 쓰면 에러가 난다. 모듈 구조는 정적이고, 익스포트는 컴파일 시점에 결정된다. 

 

B. 모듈 Import

 

 모듈에서 임포트하는 import문은 다음과 같은 형식들이 있다.

 

import x from "module-path"; // 1
import {x} from "module-path"; // 2
import {x1 as x2} from "module-path"; //3
import {x1, x2} from "module-path"; // 4
import "module-path"; // 5
import * as x from "module-path"; // 6
import x1, * as x2 from "module-path"; // 7

 

1 - 기본 별명을 임포트한다. x는 기본 별명의 별명이다.

2 - x를 임포트한다.

3 - 두번째 형식과 같다. x2는 x1의 별명이다.

4 - x1과 x2를 임포트한다.

5 - 그냥 모듈을 임포트한다. 모듈엣서 익스포트된 변수는 전혀 임포트하지 않는다.

6 - 변수 전체를 임포트한 뒤 x라는 객체로 감싼다.

7 - 6번째 형식과 같다. 기본 별명에 별명을 주었다.

 

** 임포트도 마찬가지로 정적이고, 임포트는 컴파일 시점에 결정된다.