(2) JavaScript Module - import, export

모듈의 핵심 기능은 코드를 파일 단위로 나눠놓고

필요할 때마다 불러와서 사용하는 것이라고 했을 때,

직접 불러오기를 해보기위해 calculator.mjs 파일에 있는 것들을

main.mjs 파일에서 가져와서 사용해보자.

여기서 자주 사용했던 js 확장자가 아닌 mjs 확장자를 사용했는데

그 이유는 모듈 문법을 사용하기 위해서는 mjs 확장자를 사용해야 하기 때문이다.

하지만 모듈 문법을 사용할 수 있다는 것 외에는 전혀 차이가 없으므로

일반 자바스크립트라고 봐도 된다.

---

import , export

다음과 같이 calculator 파일에 작성한 코드를 main파일로 export(내보내다) 하고자 할 때,

// calculator.mjs

const PI = 3.14;

function add(a, b) {
  return a + b;
}

 

다음과 같이 export를 변수나 함수 선언문 앞에 작성하면

main파일에서 PI와 add 함수를 불러올 수 있다.

//calculator.mjs

export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

 

불러오는 방법은 import(가져오기)를 파일 가장 윗부분에 다음과 같이 작성한다.

// main.mjs

import { PI, add } from './calculator.mjs';
console.log(PI);
console.log(add(1, 2));

 

이렇게 main 파일에서 PI와 add 함수를 가져왔기 때문에 

아래 줄에 console.log로 출력해보면 다음과 같이 결과를 가져올 수 있다.

 

이렇게 모듈 파일에서 외부로 공개하고 싶은 변수나 함수는

선언문 앞에 export 키워드를 붙여 주고

export된 변수나 함수를 불러올 때는 import키워드를 사용한다.