ES6알아보기 12 - Module

ES6알아보기 12 - Module

2018, Aug 11    

이번에는 ES6 부터 사용될 수 있는 내장모듈에 대해서 알아보겠습니다.

모듈이란?

코드 조각들을 캡슐화, 추상화하여 재사용 가능할 수 있도록 API로써 제공되는 부품을 이야기 합니다.

ES6 에서의 모듈 사용법

ES6 이전부터도 코드를 모듈화해서 사용하고자 하는 노력들은 있었습니다. CommonJS 등과 같은 외부 포멧들을 이용해서 모듈화 하는 여러 방법들이 있지만 이번에는 ES6 부터 지원하게 되는 내장 모듈 포멧에 대해서 살펴보도록 하겠습니다.

기본적인 모듈 사용법

모듈은 export, import 키워드를 사용해 모듈화 할 수 있습니다.

  • 기본적인 사용예 ES6 의 모듈은 기본적으로 각각의 파일 단위로 구성됩니다. 예로써 같은 폴더안에 print.js 파일과 index.js 파일을 만들어 예를 들어보겠습니다.

모듈을 export 로 내보내기

// print.js 라는 임의의 파일에 정의
export function sayHello() {
  console.log('hello World !!')
}

export 한 모듈을 import 로 가져오기

// index.js
import {sayHello} from './print.js'

sayHello() // hello World !!

HTML 단에서는 javascript의 type을 module 로 지정하지 않으면 import, export를 사용할 수 없습니다.

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

위의 3파일들을 서버단에 넣고 실행하게 되면 결과적으로 “Hello World !!” 가 출력되는 것을 볼 수 있습니다. 참고로 쉽게 서버단에서 test 하기 위한 툴로 lite-server 를 사용해 간단하게 test 할 수 있습니다.


export 의 종류와 그에따른 import 방법

export에는 Named export 와 default export 두가지 타입이 있습니다.

  • Named export Named export 변수나 함수들을 export 할 수 있고 파일당 여러개를 export 할 수 있습니다. 
    // 함수 정의와 함께 export
export function sayHello() { console.log('hello world') } // 함수 export
// 이미 정의된 함수를 export
function sayName(name) { console.log('my name is ' + name) }
export { sayName }
// 상수를 export
export const age = 20
// 아래와 같이 변수들을 export 하는 것도 가능합니다.
// 하지만 export 된 변수의 경우 읽기 전용이기 때문에 큰 의미가 없습니다.
// 되도록 혼동을 피하기 위해 const 만 사용하는게 좋을 듯 합니다.
// these are bad!
export var age = 20
export let age = 20

named export 로 여러개의 객체를 export 한 경우 아래와 같이 import 할 수 있습니다.

// 각각 export 한 객체명을 지정해서 import
import { sayHello, sayName, age } from './print.js'
sayHello() // hello world

// 임의의 변수에 한꺼번에 지정하기
import * as print from './print.js'
print.sayHello() // hello world

// 'as' 구문은 각각의 export 된 객체에도 지정할 수 있습니다.
import {sayHello as a, sayName as b } from './print.js'
a() // hello world
b('Carl') // my name is Carl
  • Default export default export 의 경우 스크립트 파일당 하나만 설정될 수 있습니다. 
    export default function sayHello() {
console.log('hello World')
}

default export 는 파일당 하나밖에 설정할 수 없지만, default export와 복수의 named export 를 함께 사용하는 것은 가능합니다. 하지만 그렇게 좋은 구조라고는 할 수 없을 것 같습니다.

import default객체, { named객체1, named객체2 } from './print.js'
Twitter Facebook Google+
# javascript