JavaScript - 모듈러 자바스크립트와 ES6+

JS 모듈이란?

자바스크립트의 중요한 새 기능들을 통칭하는 것으로 ES 모듈, ECMAScript 모듈이라고도 한다. 모듈은 하나 또는 그 이상의 Routine (함수, 메소드 등)으로 구성된다.

 

ES6 Modules (ESM)

ES6 이상부터 브라우저 환경에서 사용이 가능하며, import와 export를 사용한다. import와 export 모두 "as"를 사용하여 이름을 바꿔 불러오거나 내보낼 수 있다.

 

import

다른 파일에서 default export 또는 named export 한 모듈을 불러온다. 

import name from "module-name";  // default export 가져오기
import {default as x} from "module-name";  // default export 가져오기
import * as name from "module-name";  // 한 번에 다 가져오기
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";  // 모듈은 가져오지만 변수에 할당하지 않기

// name: 가져온 값을 받을 객체 이름
// member, memberN: export된 모듈에서 멤버의 이름만 가져옴
// defaultMember: export된 모듈의 default 이름을 지정함 
// alias, alias: 객체의 이름 지정
// module-name: 가져올 모듈 이름, 파일명

 

export

자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 파일에서 import 했을 때 사용 가능하다. named export와 defalut export 등이 있다.

 

1. named export 

한 모듈 내에서 여러 개가 선언될 수 있으며, 선언된 변수명 그대로 export 한다. 

export function1;  // 함수 내보내기
export class1;  // 클래스 내보내기
export variable1;  // 변수 내보내기
export function2;
export {function3 as f3, function4 as f4};

 

2. default export 

default export는 파일당 하나만 존재할 수 있다. 그래서 내보낼 개체에 이름이 없어도 괜찮다.

export function1;
export function2;
default export function3;

위와 같이 named export와 default export를 같은 모듈에서 동시에 사용해도 문제는 없다. 하지만 실무에서는 이렇게 섞어 쓰는 사례가 흔치 않다. 한 파일엔 named export나 default export 둘 중 하나만 사용한다. 

 

3. export ... from ...

import와 export를 한 번에 처리하는 방식으로, 가져온 개체를 즉시 '다시 내보내기(re-export)' 할 수 있다. 패키지의 다른 모듈들을 한 곳에 모아 일관된 형태로 내보내거나 관리하고자 할 때 사용한다.

export * from "module"  // 전체 다시 내보내기 - default export는 다시 내보내 지지 않음
export {function1} from './app.js';  // function1을 다시 내보내기 함
export {default as User} from './user.js';  // default export를 다시 내보내기 함

 

 

참고할 자료

https://ko.javascript.info/import-export

모듈 내보내고 가져오기