ES6모듈화

ES6부터는 import와 export키워드를 통해 모듈을 불러오고, 내보낼 수가 있습니다.

Common JS vs ES6모듈

기존의 Common JS에서는 require키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러오는 반면, ES6기반의 모듈의 내보내기와 가져오기의 경우 import, from, export, default키워드를 통해 조금 더 명시적으로 모듈을 불러 올 수 있습니다.

특히, ES6모듈의 경우 비동기 방식으로 작동을 하고 파일 내부에서도 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리합니다.

또한 Named Parameter와 같이 CommonJS에서는 지원하지 않는 기능을 지원하며 이전 방식들보다 여러가지 이점을 가지고 있습니다.

복수 객체 내보내기/ 불러오기

Common JS에서는 내보낼 복수 객체들을 변수에 할당하는 방식을 썼다면, ES6에서는 export키워드를 통해 내보낼 때 사용한 함수나 변수의 이름을 import키워드에 그대로 사용을 해 불러올 수 있습니다. 이렇게 이름을 지정해서 내보내는 방식을 Named Exports라고 합니다.

1. 내보내기(export)

1-1. Named export

const num = 10;
export { num }

위와 같이 미리 선언된 변수나 함수를 export할 수 있으며 아래와 같이 바로 export키워드를 이용해 내보낼 수도 있습니다.

export const str = '안녕하세요';

1-2. Default export

Default export의 경우 모듈당 딱 하나의 멤버에만 선언을 할 수 있습니다. 따라서 나머지의 경우 Named export를 사용합니다.

let a = 10;
let b = 20;

export default a; //default export

export { b } //Named export

함수내보내기

export function random() {
  return Math.floor(Math.random() * 10) 
}

변수내보내기

export const user = {
  name: '0seo!',
  age: 85
}

2. 가져오기(import)

아래와 같이 import키워드를 통해 export 된 변수나 함수를 불러올 수 있습니다.

import { 불러올 변수 또는 함수의 이름 } from '파일경로'

만약, 여러개의 멤버를 불러오는 경우에는 아래와 같이 ES6의 Destructuring 문법을 사용해서 필요한 객체만 선택적으로 전역에서 사용을 할 수 있습니다.

import { 변수명1, 변수명2 } from '파일경로';

만약, 해당 파일의 있는 모든 export을 가져오고 싶다면 아래와 같이 작성해 사용을 할 수 있습니다.

import * from '파일경로';

또한 꼭 지정된 이름이 아니라 별명을 부여해 별명으로 불러올 수도 있습니다. 단, as지시자를 이용해 별명을 지정해줘야합니다.

import 변수명 as 별명 from '파일경로';

3. 브라우저 환경

브라우저 환경에서 동작할 수 있도록 html의 파일에 모듈을 가져올 수도 있습니다.

//05-es-module-export.js
const a = 'a';

function hello() {
	return 'hello';
}

export { a, hello };

1. script태그에 type="moudle"을 지정해 html파일로 모듈을 순서대로 가져올 수 있습니다.

<script type="module" src="./05-es-module-export.js"></script>

2. async type="moudle"을 이용해 순서와 상관 없이 가져올 수도 있습니다. 순서를 예측할 수 없기 때문에 비동기로 로딩을 하게 됩니다.

<script async type="module" src="./05-es-module-export.js"></script>

3. 인라인 방식으로 입력할 수도 있습니다.

<script type="module">
  import { a, hello } from './05-es-module-export.js';
			console.log(a);
			console.log(hello());
</script>