모듈 사용하기 import, export

export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 먼저 아래와 같이 설정해 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 해줘야 합니다.

 

<script type="module" src="main.js"></script>

 

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다.

 

// say.js

export function hello() {
  alert('Hello!');
}

 

아래처럼 미리 함수를 선언하고 마지막에 한번에 내보내기도 가능합니다.

 

// say.js

function hello() {
  alert('Hello!');
}

function bye() {
  alert('Bye!');
}

export {hello, bye};

 

export 한 것들을 import 하는 법은 아래와 같습니다.

 

// main.js

import {hello, bye} from './say.js';

hello(); // Hello
bye(); // Bye

 

가져올 것이 많다면 아래처럼도 쓸 수 있습니다.

 

import * as say from './say.js';

say.hello(); // Hello
say.bye(); // Bye