티스토리 뷰

Daylogs/Javascript

ES6: Modules (import & export)

ohgyun 2015. 5. 14. 20:44
발생일: 2015.05.14

키워드: Module, 모듈, import, export, module.exports, export default

내용:

ES6에는 언어 레벨에서 모듈을 정의할 수 있는 방법을 제공한다.
`import`와 `export` 키워드로 외부 모듈을 가져오거나 설정할 수 있으며,
비동기 모델을 포함하고 있다. (모듈이 로드될 때까지 실행되지 않는다)


하지만, 2015년 5월 현재, 모든 브라우저에 구현되어 있지 않다.



ES6의 모듈 시스템을 사용하려면, ES6 Module Transpiler, Babel, Traceur 등과 같은 트랜스파일러를 사용해야 한다.



먼저, 모듈을 정의하는 `export` 문법은 아래와 같다.

export name1, name2, ..., nameN;
export *;
export default name;

- name: export할 속성이나 함수, 객체
- *: 파일 내의 정의된 모든 속성, 함수, 객체
- default: 모듈의 기본값. 파일 내에서 한 번만 호출될 수 있다.


예제를 보면 더 이해하기 쉽다.

// 속성을 export 하는 것은 CommonJS의 패턴과 동일한다.
export function foo() {};
export {
  foo: function () {},
  bar: 'bar'
};

// ES6에 추가된 객체 리터럴(Enhanced Object Literals)을 함께 사용하면,
// 더 간결하게 변수를 export 할 수 있다.
var foo = function () {};
var bar = function () {};
export { foo, bar };

// 모듈 전체를 export 하고자 할 땐, `default` 키워드를 함께 쓸 수 있다.
export default function () {}

// `export default`는 CommonJS의 아래 패턴과 동일하다고 보면 된다.
module.exports = function () {};


export 한 모듈을 불러올 땐, `import` 키워드를 쓸 수 있고 문법은 아래와 같다.


import name from "module-name";
import {
  member [as alias],
  ...
} from "module-name";
import "module-name" [as name];

- module-name: 불러올 모듈명, 파일명
- member: 모듈에서 export 한 멤버의 이름
- alias: 불러온 멤버를 할당할 변수명


정의는 약간 복잡해보일 수 있지만, 예제를 보면 쉽게 이해된다.

// `my-module` 모듈을 가져와 `myModule`라는 변수에 할당한다.
import myModule from 'my-module';

// 위 코드는 아래처럼 쓸 수도 있다.
import 'my-module' as myModule;

// CommonJS 스타일로 작성했다면, 아래 코드와 동일하다.
var myModule = require('my-module');


// 모듈에서 특정 멤버만 변수로 할당할 수 있다.
import { foo, bar } from 'my-module';

// CommonJS 스타일로 작성했다면, 아래 코드와 동일하다.
var myModule = require('my-module');
var foo = myModule.foo;
var bar = myModule.bar;


// 모듈이나 멤버의 이름을 다른 변수명으로 설정할 수 있다.
// 변수명이 긴 경우 요긴하게 사용할 수 있다.
import {
  reallyReallyLongModuleName as foo
} from 'my-module';


// 단순히 특정 모듈을 불러와 실행만 할 목적이라면
// 아래처럼 `import`만 하는 것도 좋다.
import 'my-module';



위에서 언급했던 것처럼, ES6의 모듈 시스템이 아직 브라우저에 적용되진 않았고,
적용되더라도 적게는 6개월에선 1년 이상까지의 시간이 걸릴 것으로 예상된다.

현재 사용하려면, ES6 Module Transpiler, Babel, Traceur 등과 같은 트랜스파일러를 사용해보면 된다.

트랜스파일러는 모듈을 동기로 한 파일로 병합해 사용하는 구조인데,
RequireJS처럼 비동기 모듈 로딩이 필요한 상황이라면 SystemJS 를 고려해보는 것도 좋다.



참고:


반응형
저작자표시 비영리 변경금지
댓글
공지사항