import / export

1. import / export

import와 export는 ES6 방식에서 새롭게 등장한 자바스크립트 모듈의 로딩 방식입니다.

모듈을 읽어들이는 import를 설명하기에 앞서, 모듈에 선언된 멤버를 외부에 노출시키는 export를 설명하겠습니다.

export에는 두 가지 타입이 있습니다.

• Named export
• Default export

1.1 Named export와 import

1.1.1. 여러 개의 멤버를 export

// 함수 구현부
let sum = (a, b, radix = 10) => { 
  return parseInt(a, radix) + parseInt(b, radix); 
};
let multiple = (a, b, radix = 10) => { 
  return parseInt(a, radix) * parseInt(b, radix); 
};

export { sum, multiple };

1.1.2. 멤버의 생성과 동시에 export

export let divide = (a, b, radix = 10) => { 
  return parseInt(a, radix) / parseInt(b, radix); 
};

export const hex = 16;

1.1.3 일부 멤버만 import

mport { sum, multiple } from './calculator';

console.log(sum(3, 5));			// 8
console.log(multiple(3, 5));

1.2 Default export와 import

Default export 는 모듈당 딱 하나의 멤버에만 선언할 수 있습니다. 가장 간단하게 import할 수 있게 되므로, 모듈의 메인에 해당하는 것을 선택하는 것이 좋습니다

1.2.1. export default

// 함수 구현부
let sum = (a, b, radix = 10) => { 
  return parseInt(a, radix) + parseInt(b, radix); 
};
let multiple = (a, b, radix = 10) => { 
  return parseInt(a, radix) * parseInt(b, radix); 
};

// defualt export
export default sum;

// defualt는 모듈당 하나밖에 할 수 없으므로, 나머지 멤버는 named export를 해야 한다.
export { multiple };

1.2.2. default export의 import

import sum from './calculator';

console.log(sum(3, 5)); 	// 8