자바스크립트 ES6 방식의 모듈 로딩 방식 (import/export)

자바스크립트 ES6 방식의 모듈 로딩 방식 (import/export)

1. import / export

import와 export는 ES6 방식에서 새롭게 등장한 자바스크립트 모듈의 로딩 방식입니다.

모듈을 읽어들이는 import를 설명하기에 앞서, 모듈에 선언된 멤버를 외부에 노출시키는 export를 설명하겠습니다.

export 에는 두 가지 타입이 있습니다.

• Named export
• Default export

1.1 Named export와 import

1.1.1. 여러 개의 멤버를 export

// 함수 구현부
let sum = (a, b, radix = 10) => { 
  return parseInt(a, radix) + parseInt(b, radix); 
};
let multiple = (a, b, radix = 10) => { 
  return parseInt(a, radix) * parseInt(b, radix); 
};

export { sum, multiple };

위 예제처럼, 미리 구현해둔 함수나 변수들을 export { }문법으로 묶어서 한번에 export 할 수 있습니다.

1.1.2. 멤버의 생성과 동시에 export

export let divide = (a, b, radix = 10) => { 
  return parseInt(a, radix) / parseInt(b, radix); 
};

export const hex = 16;

또는 위 예제처럼 변수의 선언과 동시에 export 하는 것도 가능합니다.

1.1.3. 노출된 모든 멤버를 import

위 named export 대응되는 import는 다음과 같습니다.

import * as calc from './calculator';

console.log(calc.sum(3, 5));		// 8
console.log(calc.multiple(3, 5));	// 15

1.1.4. 일부 멤버만 import

import { sum, multiple } from './calculator';

console.log(sum(3, 5));			// 8
console.log(multiple(3, 5));	// 15

1.1.5. 멤버의 별명(alias)을 지정해서 import

import { sum as s, multiple as m } from './calculator';

console.log(s(3, 5));	// 8
console.log(m(3, 5));	// 15

1.2 Default export와 import

Default export 는 모듈당 딱 하나의 멤버에만 선언할 수 있습니다. 가장 간단하게 import할 수 있게 되므로, 모듈의 메인에 해당하는 것을 선택하는 것이 좋습니다.

1.2.1. export default

/** 
 * @file: calculator.js
 * @desc: Various calculator utils
 */

// 함수 구현부
let sum = (a, b, radix = 10) => { 
  return parseInt(a, radix) + parseInt(b, radix); 
};
let multiple = (a, b, radix = 10) => { 
  return parseInt(a, radix) * parseInt(b, radix); 
};

// defualt export
export default sum;

// defualt는 모듈당 하나밖에 할 수 없으므로, 나머지 멤버는 named export를 해야 한다.
export { multiple };

위 예제처럼 export default라는 키워드를 통해서 sum 을 default export 로 정의했습니다. default 설정은 모듈당 하나로 제한되므로, sum 변수에만 default를 걸어두고, multiple 변수는 named export 로 선언해야 합니다.

1.2.2. default export의 import

import sum from './calculator';

console.log(sum(3, 5)); 	// 8

1.2.3. 기본 멤버들과 함께 import

import sum, * as calc from './calculator';
import sum, { multiple } from './calculaotr'

2. 결론

Javascript는 역사적으로 모듈 로딩방식을 언어차원에서 제공하지 않았습니다. 그래서 나온 모듈의 로딩 방식이 CommonJs/AMD 같은 방식이었습니다. 그리고 ES6에 이르러 자바스크립트도 모듈로딩 방식을 내장하게 되었습니다.

ES6의 모듈 로딩방식은 꽤나 간결한 방식 입니다. 하지만 ES6의 문법을 완전히 지원하는 브라우저가 극히 드물기 때문에 아무데서나 사용하기는 쉽지 않습니다. node.js 조차 ES6의 문법을 제대로 지원하지 않습니다. 따라서 node.js로 위 코드를 테스트 하려하면 아마 import라는 알 수 없는 키워드가 있다는 등의 에러가 발생할 겁니다.

node.js 에서 테스트 하고 싶으면 bable.js 를 사용해서 es5 이하로 컴파일 하시면 테스트해볼 수 있습니다. 저처럼 Typescript로 넘어오셔서 타입스크립트의 컴파일을 이용하시는 것도 좋습니다. 타입스크립트가 굉장히 간단하게 ES3까지 컴파일을 지원해 줍니다. :)

잘못되거나 궁금한 점이 있으면 댓글로 문의해주세요.

3. 출처

• MDN 공식문서 - export
• MDN 공식문서 - import