자바스크립트(es6) export default

각 언어마다 모듈에 접근하기 위한 문법이 있는데요. 자바스크립트(ES6)에서는 파일을 모듈로 취급하고 모듈을 내보내고 사용하기 위해서 import, export를 사용합니다.

 

1. 모듈이란?

모듈은 비슷한 기능을 묶어 관리하는 것을 말합니다. 예를 들어 사칙연산을 구현한 plus, minus 등의 함수는 math이름으로 모듈화 할 수 있습니다.

 

2. 모듈 내보내기

자바스크립트에서는 named와 default로 총 두 가지 방법으로 모듈을 내보낼 수 있습니다. 

 

2.1 default export 

소스코드: https://github.com/choisungwook/portfolio/blob/master/documentation/javascript/module/exportdefault_calc.js

default export는 1개 이상의 함수, 변수를 내보낼 때 사용합니다.  아래 예제를 보면, plus, minus함수를 export default로 내보내고 있습니다. export default는 딱 한번만 사용할 수 있습니다. 

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

function minus (a, b) {
    return a - b;
}

export default { plus, minus };

 

2.2 named export

소스코드: https://github.com/choisungwook/portfolio/blob/master/documentation/javascript/module/named_calc.js

named export는 default export와 다르게 여러 번 내보내기를 사용할 수 있습니다. 내보내고 싶은 함수 또는 변수에 export키워드를 사용합니다.

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

export function minus (a, b) {
    return a - b;
}

 

 

3. 모듈 import

모듈 import는 export한 것을 가져와서 사용하는 문법입니다. default와 named export에 따라서 가져오는 방법이 다릅니다.

 

3.1 export default를 import

소스코드: https://github.com/choisungwook/portfolio/blob/master/documentation/javascript/module/app.js

export default는 한번만 내보내기 하므로 import역시 한번만 import합니다. import할 변수 이름은 마음대로 설정할 수 있습니다. 

import하는 변수를 사용해서 내보내기한 리소스(함수, 변수)에 접근할 수 있습니다. 아래 예제에서는 내보낸 plus, minus함수를 사용합니다.

import math from "./exportdefault_calc.js";

console.log(math.plus(1,2));
console.log(math.minus(1,2));

 

3.2 named default를 import

소스코드: https://github.com/choisungwook/portfolio/blob/master/documentation/javascript/module/app.js

named default는 여러 번 내보낼 수 있으므로 그 수만큼 import해야 합니다. 그리고 import할 변수 이름도 내보낸 이름과 동일해야 합니다.

import {plus, minus} from "./named_calc.js";
console.log(plus(1,2));
console.log(minus(1,2));

 

4. 참고자료

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
• https://youtu.be/WUirHxOBXL4?t=151