ES6 모듈 만들고 사용하기
자바스크립트에는 지금까지 C(#include)나 JAVA(import)의 모듈시스템이 활성화되지 않았을까?
자바스크립트는 호이스팅이 되는 관계로 변수나 함수가 전역에서 사용할 수 있었기 때문에 이름으로 충돌을 일으키는 경우가 많아서 이용하기 어려웠다. (CommonJS로 사용할 수는 있었음)
ES6부터는 모듈 시스템을 사용할 수 있게 만들었다.
하지만 브라우저에서 지원이 되지 않고있기때문에 webpack같은 모듈 번들러를 사용해야만 모듈시스템(import, export)을 사용할 수 있다.
export, import
1 2 3 4 5 6 7 8 9 10 11 | export const pi = Math.PI; export function square(x) { return x * x; } export class Person { constructor(name) { this.name = name; } } |
export 키워드로 변수, 함수, 클래스를 외부의 스크립트로 모듈화 시킬 수 있다.
외부로 보내고 싶은 것들에 일일이 키워드를 붙여도 되고 아래처럼 한번에 export해도된다.
1 2 3 4 5 6 7 8 9 10 11 | const pi = Math.PI; function square(x) { return x * x; } class Person { constructor(name) { this.name = name; } } export { pi, square, Person }; |
또한 export default pi; 이렇게 default키워드를 붙일 수도 있는데 default키워드를 사용하면 이 모듈을 사용하는 스크립트에서 따로 모듈 변수명을 입력하지 않으면 자동으로 default키워드가 있는 모듈을 가져온다.
1 2 3 4 5 | // main.js import { pi, square, Person } from './lib'; console.log(pi); // 3.141592653589793 console.log(square(10)); // 100 console.log(new Person('Lee')); // Person { name: 'Lee' } | cs |
반대로 가져오는 방법은 위와 같이 "import" 키워드를 사용하고 from 으로 해당 모듈의 js파일을 가리키면 된다.
1 2 | import React from 'react'; import { render } from 'react-dom'; | cs |
[리액트에서 모듈을 사용했던 방법]
1 2 3 4 | import * as lib from './lib'; console.log(lib.pi); // 3.141592653589793 console.log(lib.square(10)); // 100 console.log(new lib.Person('Lee')); // Person { name: 'Lee' } | cs |
위와 같이 "as"를 사용해서 일일이 모듈을 불러오지 않고 한번에 사용할 수 있다.
참고 사이트
http://poiemaweb.com/es6-module
https://www.zerocho.com/category/EcmaScript/post/579dca4054bae71500727ab9
'Javascript > Javascript(ES6)' 카테고리의 다른 글
ES6 자료구조 스택(Stack)만들어보기, 스택 2개로 큐(Queue) 만드는 방법 (0) | 2018.01.14 |
---|---|
ES6 javascript로 자료구조 List 구현하기 (배웠으면 사용해보자!!) (0) | 2018.01.14 |
이터레이터(Iterator)와 for of 문(인덱스말고 값을 순회한다.) (0) | 2018.01.11 |
ES6 Class (클래스, Syntactic sugar, prototype을 이용하지만 문법적으로 예쁘게 만들어주는 class) (3) | 2018.01.09 |
Destructuring(디스트럭쳐링) - 배열과 객체의 값을 변수로 받는 방법 (0) | 2018.01.03 |