Java Script / export,import

모듈을 내보내는 방법

1. 기본(Default) 내보내기:
   export default 구문을 사용하여 모듈에서 기본적으로 내보내는 항목을 설정합니다.
   모듈당 기본 내보내기는 하나만 존재할 수 있습니다.
   다른 파일에서는 중괄호 없이 가져와서 해당 모듈의 기본 내보내기를 사용할 수 있습니다.

ex)

euro.js //기본 내보내기 방법

function euroToWon(money) {
  var won = money * 1329.87;
  return won;
}

export default euroToWon;

중괄호를 사용하지 않고 기본 내보내기로 가져올 수 있습니다.

import euroToWon from './exchange/euro.js';

---

2. 명명된(Named) 내보내기:
   export 또는 export function 구문을 사용하여 함수, 변수, 클래스 등을 명명된(named) 내보내기로 내보냅니다.
   명명된 내보내기로 여러 개의 항목을 한 번에 내보낼 수 있습니다.
   다른 파일에서는 중괄호를 사용하여 가져와서 해당 모듈의 명명된 내보내기를 사용할 수 있습니다.

ex)

asia.js // 명명된(Named) 내보내기 export 방법1

function yuanToWon(money) { 
  var won = money * 192.53;
  return won;
}
								
function yenToWon(money) {
  var won = money * 9.88;
  return won;
}

export { yuanToWon, yenToWon }; 

asia.js // 명명된(Named) 내보내기 export 방법2

export function yuanToWon(money) { 
  var won = money * 192.53;
  return won;
}
								
export function yenToWon(money) {
  var won = money * 9.88;
  return won;
}

두 방법 모두 중괄호를 사용하여 명명된(named)내보내기로 가져올 수 있습니다.

import { yuanToWon, yenToWon } from './exchange/asia.js';

---

✏️ 주요 차이점

기본 내보내기는 모듈당 하나의 항목만 내보낼 수 있지만, 명명된 내보내기는 여러 개의 항목을 한 번에 내보낼 수 있습니다.
기본 내보내기를 가져올 때는 중괄호 없이 가져옵니다. 명명된 내보내기를 가져올 때는 중괄호를 사용하여 가져옵니다.
기본 내보내기는 모듈에서 기본적으로 내보내는 항목을 설정하는 데 사용됩니다. 명명된 내보내기는 특정 항목들을 선택하여 내보내거나 가져올 때 사용됩니다.

일반적으로 명명된(named) 내보내기를 사용하여 필요한 함수, 변수, 클래스 등을 내보내고 가져올 수 있습니다.

기본 내보내기는 특정 상황에서 유용할 수 있지만, 대부분의 경우에는 명명된 내보내기를 사용하는 것이 더 직관적이고 명확합니다. 명명된 내보내기를 사용하면 중괄호를 사용하여 필요한 항목들을 명시적으로 가져올 수 있으며, 가져오는 항목들이 어떤 것들인지 한눈에 파악하기 쉽습니다.

기본 내보내기를 사용하는 경우에는 가져올 때 중괄호 없이 가져오므로, 내보낸 항목이 어떤 것인지 한 번에 파악하기 어려울 수 있습니다. 또한, 모듈당 하나의 기본 내보내기만 가능하므로 여러 항목을 한 모듈에서 내보내야 할 경우에는 명명된 내보내기를 사용하는 것이 더 적합합니다.

따라서, 일반적으로 기본 내보내기보다는 명명된 내보내기를 사용하여 모듈에서 필요한 항목들을 내보내고 가져오는 것이 권장됩니다.