기존의 javascript에서는 <script src=""> 형태로 파일 단위로만 스크립트들을 재사용할 수 있었다. 특히 <script>는 html에서 사용하는 태그로 하나의 javascript에서 다른 javascript를 사용할 수가 없었다.
es2015에서는 module의 개념이 도입되면서 이런 부분이 개선되었다.
module 활용
module에서는 공유 대상을 제공하는 export와 활용하는 import가 사용된다.
여러 항목을 export 하기
항목을 공유하기 위해서는 export를 사용한다. 다음과 같이 multi_export.js를 작성할 수 있다.
// 선언과 동시에 export
export let name = '홍길동';
export function add(a, b) {
return a + b;
}
// 선언과 별개로 export
let addr = "seoul";
let age = 30;
export { addr, age };
위의 javascript는 name, add, addr, age라는 4가지를 export 하고 있다.
단일 항목을 export 하기
한 가지 항목만을 export 할 때에는 export default를 사용한다. 다음과 같이 default_export.js를 작성할 수 있다.
export default {
sayHello : {
kor(name) {
console.log(`안녕 ${name}`);
},
eng(name) {
console.log(`Hello ${name}`);
}
}
}
import로 export 내용 사용하기
export 한 내용을 가져다 쓰기 위해서는 import 명령을 사용한다. 아래와 같이 import_test.js를 작성할 수 있다.
import {
name,
add,
addr as myaddr, // 다른 이름으로 변경 가능
age
} from "./multi_export.js";
import greeting from "./default_export.js";
console.log(name, myaddr, age);
console.log(add(10, 20));
greeting.sayHello.kor("홍길동");
export {name, myaddr, age, greeting}
첫 번째 import 문장에서는 {} 가 사용되었는데 de-structuring 처럼 multi_export.js에서 export 한 내용 중 필요한 내용을 선언해 주면 된다. 만약 이름을 달리 사용하려는 경우는 as 키워드로 이름을 지정할 수 있다.
두 번째 import 문장은 어차피 하나만 export되기 때문에 하나의 변수로 받아서 처리하고 있다.
이로써 javascript 파일에서 다른 javascript를 가져다 사용할 수 있게 되었다.
html에서의 활용
export 한 내용을 html에서 사용하기 위해서는 <script>태그에 type=module 속성을 추가해주어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body></body>
<script type="module">
import { name, greeting } from "./import_test.js";
console.log(name);
greeting.sayHello.eng("hong");
</script>
</html>