[자바스크립트] ES6 모듈 내보내기/가져오기(Export/Import)

학습목표
1. Named Export에 대해서 학습
2. Default Export에 대해서 학습
3. Default export-import / Named export-import 혼합 사용에 대해서 학습
4. *를 이용한 Import에 대해서 학습
5. Dynamic Import에 대해서 학습

 

1. Nmaed Export

Named Export방식은 export하고자하는 객체들만 export 키워드를 명시적으로 붙여 내보내는 방식입니다.

 

내보내기(Export)

math.js

export const plus = (a,b)=>{return a+b};
export const minus = (a,b)=>{return a-b};
export const divide = (a,b)=>{return a/b};

위와 같이 plus, minus, divide 함수에 export 키워드를 붙여서 내보냅니다.

 

가져오기(Import)

main.js

...

// math 모듈에서 plus 함수만 import함
// 단, export한 함수와 import한 함수의 이름은 동일해야함
import {plus} from "./math.js";
result1.textContent = "plus(2,2) : " + plus(2,2);

// import한 함수 이름을 변경하고 싶다면 as 키워드 사용
import {plus as add} from "./math.js";
result2.textContent = "add(2,2) : " + add(2,2);

Named Export 방식으로 내보낸 모듈들은 중괄호를 활용하여 가져올 객체들을 명시해야 합니다. 만약 가져올 함수 이름을 다른 이름으로 사용하고 싶다면 as 키워드를 사용하여 명시합니다.

 

2. Default Export

Default Export 방식은 Named Export 방식처럼 하나하나 export 키워드를 명시하지 않고 default 키워드를 사용하여 한 개의 객체에 export하고자 하는 객체들을 명시하여 내보내는 방식입니다. 주의사항은 한 파일에 한개의 export default만 존재해야 합니다. Default Export 방식은 딱 한개의 모듈만 export하고자 할때 사용하면 좋습니다.

 

내보내기(Export)

math.js


const plus = (a,b)=>{return a+b};
const minus = (a,b)=>{return a-b};
const divide = (a,b)=>{return a/b};

export default {plus,minus,divide};	// 내보낼 모듈들을 명시합니다.

가져오기(Import)

main.js

import math from './math.js';  		// 모듈의 이름과 동일하게
import myMath from './math.js';    // 다른 이름으로 import해도 됩니다.

result1.textContent = "plus(2,2) : " + math.plus(2,2);
result2.textContent = "minus(2,2) : " + myMath.minus(2,2);

Default Export 방식의 내보내기를 사용하면 Named Export 방식과는 다르게 중괄호를 사용하지 않아도 됩니다. 또한 다른 이름으로도 가져올 수 있습니다. 위에서 math, myMath 객체는 같은 내용을 가지고 있습니다.

 

3. Default export-import, Named export-import

• Named export-import : export 하고자 하는 모듈들만 명시하고 중괄호를 통하여 import하는 방식
• Default export-import : default 키워드를 사용하여 export하고자 하는 모듈들을 명시하는 방식

아래의 코드는 Named Export 방식과 Default Export 방식을 혼합하여 사용한 예제입니다.

 

내보내기(Export)

math.js

const plus = (a,b)=>{return a+b};
export const minus = (a,b)=>{return a-b};
export const divide = (a,b)=>{return a/b};

export default {plus};

 

가져오기(Import)

main.js

import myMath, {minus} from './math.js';

result1.textContent = "plus(2,2) : " + myMath.plus(2,2);
result2.textContent = "minus(2,2) : " + minus(2,2);

 

4. '*' 표시를 활용한 Import

Default Export 방식과 비슷하게 Import할때 * 표시를 활용하여 export 키워드가 붙인 모듈 모두를 import할 수 있습니다. 단, default export가 없는 파일에서만 사용이 가능합니다.

 

내보내기(Export)

math.js

export const plus = (a,b) => a+b;
export const minus = (a,b) =>a-b;
export const divide = (a,b) => a/b;

 

가져오기(Import)

main.js

import * as myMath from './math.js';

result1.textContent = "plus(2,2) : " + myMath.plus(2,2);
result2.textContent = "minus(2,2) : " + myMath.minus(2,2);

 

5. Dynamic Import

import시 대상이 되는 파일의 export 키워드가 붙인 모든 모듈들을 import합니다. 이는 로딩 속도를 늦추는 대신 사용자는 필요한 모듈만 import하는 장점이 있습니다.

 

내보내기(Export)

math.js

export const plus = (a,b) => a+b;
export const minus = (a,b) =>a-b;
export const divide = (a,b) => a/b;

 

가져오기(Import)

function doMath(){
	import("./math.js")
		.then(math => {
                        console.log(math.plus(2,2));
                    });
}
btn1.addEventListener("click", doMath);

async function doMath2(){
	const math = await import("./math.js");
	console.log(math.minus(2,2));
}
btn2.addEventListener("click", doMath2);

 

References

[유튜브] Export Default 과연 제대로 알고계십니까?