Modules(모듈)

모듈이란?

어플리케이션을 구성하는 개별적 요소를 모듈이라 부르며 (.js 확장자의 개별 파일)
기능별로 쪼개져 있어 필요한 기능을 불러다가 프로젝트에 삽입해 사용할 수 있음
이전까지는 없던 모듈을 ES6에서 추가했지만 대부분 브라우저에서 지원하지 않으므로,
Babel이나 TypeScript를 사용해 ES5로 변환해 사용하도록 한다.

ES6 모듈을 내보내고 가져올 때 export, import를 사용한다

export와 import

한가지의 모듈 내에서 선언한 내용을 다른 모듈에서 사용할 수 있게 할 때 export로 내용을 내보낸다.
export는 다음과 같이 사용한다

//num.js
export const random = Math.random();

export function double(x) {
    return 2 * x;
}

위와같이 상수, 함수, 클래스 등 원하는 내용을 export로 내보내며 일일이 써주지 않고 묶어서 내보낼 수도 있다.

const random = Math.random();

function double(x) {
    return 2 * x;
}

export { random, double };

위에서 export로 내보낸 내용을 다른 모듈에서 import로 다음과 같이 불러온다

//main.js
import { random, double } from './num.js';

만약 불러올 모듈이 많다면 한번에 불러올 수도 있다

//main.js
import * as num from './num.js';

이름을 바꿔서 import할 수도 있다.

import { random as ran, double as db } from './num.js';

모듈의 장점은 위의 방법으로 기능마다 모듈로 쪼개놓으면 유지보수의 용이함, 성능 향상 등 보다 편하게 개발할 수 있는 환경을 만들 수 있다.

'개발 > ES6' 카테고리의 다른 글

6. 함수 파라미터 확장  (1) 2017.04.30
5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28

+ Recent posts