ES6 자바스크립트 모듈 사용하기 (import, export)
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