(3) JavaScript Module - default export

▼ mjs 파일

//calculator.mjs

export const PI = 3.14;

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

// main.mjs

import { PI, add } from './calculator.mjs';
console.log(PI);
console.log(add(1, 2));

---

default export는 생각보다 간단한데

그냥 단순히 export 옆에 default라고 추가만 해주면 된다.

 

default export

default는 기본, 기본값을 의미하며

자바스크립트에서의 default export는 조금 더 편리하게 import 할 수 있게 도와준다.

 calculator와 main 파일을 다음과 같이 수정해보자.

//calculator.mjs

export const PI = 3.14;

export default function add(a, b) { //default export
  return a + b;
}

// main.mjs

import  qwer  from './calculator.mjs';
console.log(qwer(1, 2));

원래라면 괄호를 열고 import할 것을 써 줘야 했지만

default export를 한 것은 그냥 이름만 써줘도 되며 

꼭 export한 것의 이름이 아닌 아무거나 작성해도 된다.

 

즉, 위 코드는 calculator.mjs 파일에서 default export한 것을

"qwer" 이름으로 가져오겠다는 뜻이며

실행하면 다음과 같이 잘 출력 되는 것을 확인할 수 있다.

 

 

---

그리고 일반 export 했던 "PI" 도 같이 가져오고 싶다면

qwer 뒤에 중괄호 열고 { PI } 라고 작성해주면 된다.

일반 export한 것은 꼭 중괄호와 사용한 이름을 꼭 그대로 작성해야 한다.

// main.mjs

import  qwer, { PI } from './calculator.mjs';

console.log(PI);
console.log(qwer(1, 2));

---

default export 의 특징

•  function 앞에는 default를 바로 써 줄 수 있다.

export default function add(a, b) { //default export
  return a + b;
}

 

• 모듈 하나, 즉 파일 하나마다 default export를 최대 한 번씩만 쓸 수 있다.

//calculator.mjs

const PI = 3.14;

export default PI;

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

export default는 let이나 const 앞에는 바로 써 줄 수 없다.

그렇기 때문에 무조건 변수를 먼저 선언해야 하며 

다른 줄에 "export default 변수 이름" 을 선언 해줘야 한다.

하지만 "모듈은 여러 default export를 가질  수 없다"고 에러가 발생하는데

이것이 "모듈 하나, 즉 파일 하나마다 default export를 최대 한 번씩만 쓸 수 있다"는 것에 대한 의미이다.

 

default export는 기본적으로 export 할 것을 정하는 것인데

특징을 따라서, 여러 개를 기본적으로 export할 수는 없기 때문이다.

그래서 위 오류를 해결하려면 function 앞에 default를 지워주면 문제가 해결된다.

//calculator.mjs

const PI = 3.14;

export default PI;

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

 

위와 같이 export 했다면 import하는 파일에서 다음과 같이 바꿔 줘야 한다.

// main.mjs

import  PI, { add } from './calculator.mjs';

console.log(PI);
console.log(add(1, 2));

 

일반 export를 한 것은 이름을 그대로 써야 하기 때문에 중괄호 { add }를 사용했으며

일반 export를 보통 named export라고 부른다.

 

정리하면 export 파일에서의 add는 named export이고 PI는 default export라고 볼 수 있다.

import 파일에서도 마찬가지로 {  add } 를 named import, PI는 default import 라고 볼 수 있다..