ES6 모듈 문법 :: export default와 export {} 차이 이해하기

Export Default / Export {} 사용 예시

export default / import 문법

• export default는 한 모듈에서 딱 한번만 사용 가능
• import시 자유롭게 작명 가능

 

// myModule.js

const constantValue = 42;

export default constantValue

- export default 변수명

 

// Vue.app
import 작명 from "./myModule.js";

console.log(작명); // 42

- import 작명 from "파일 경로"

 

export { } / import 문법

• export{}는 여러번 사용 가능
• import시 자유로운 작명 불가능. export 변수명을 사용

var contantValue = 42;
var contantValue2 = 52;

export {contantValue, contantValue2}

// Vue.app
import {contantValue, contantValue2} from "./myModule.js";

console.log(contantValue, contantValue2); // 42 52