export / export default

 

 

Named exports

 : 많은 것들을 export / 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;

// main.js
// export한 이름 그대로 사용
import {plus} from "./math";

// import하는 이름을 바꾸고 싶을 때 as
import {plus as add} from '.math';

 

 

 

---

 

 

export default

 

 

 : 여러 함수를 갖고있는 한개의 객체를 디폴트로 export

 : 각 파일마다 단 한개의 Default export 만 존재 할 수 있음

// math.js
const plus = (a,b) => a + b;
const minus = (a,b) => a - b;
const divide = (a,b) => a / b;

export default { plus, minus, divide };

// main.js
// export한 이름과 다르게 가능
import myMath from "./math";

myMath.plus(2,2);

// * = everything (math 모듈에서 모든걸 Import 함)
import * as myMath from "./math";

whatever.plus(2,2);

 

 

 

---

 

 

 ? 로딩 빠르게

1. 필요한것만 import

// math.js
const plus = (a,b) => a + b;
const minus = (a,b) => a - b;
const divide = (a,b) => a / b;

export default { plus, minus, divide };

// main.js
// named export사용
import {plust} from "./math";

myMath.plus(2,2);

 

 

2. Dynamic import

 : 실제 유저가 사용할 모듈만 import

function doMath () {
	import ('./math')
    .then (math => math.plus(2,2));
}
btn.addEventListener('click', doMath');

async function doMath () {
	const math = await import ('./math')
    math => math.plus(2,2);
}
btn.addEventListener('click', doMath');