Java Script / default expor, named export 란?

default export

Default로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등만 export할 수 있음.

모듈의 이름이 무엇이든 간에 default로 내보낸 모듈은 어떤 이름으로든지 import

// import
import HIHIHI from "./MyDefaultExport";

// export
const HIHIHI = () => {}
export default HIHIHI;

• 단, let, const를 바로 default export할 수 없음!
• 내보내는 값과 받아주는 값의 이름이 동일 해야 함.
• 원하는 이름으로 import가 가능 함

named export

한 파일 내에서 여러 변수/클래스 등을 export할 수 있음.

해당 모듈을 불러오고자 하는 파일에서는 중괄호로 감싸서 불러와야 하는데, 필요한 API만 중괄호로 감싸서 불러 올 수 있음.

원하는 이름으로 import 하는게 불가능 함.

// imports
import { ChartData as UsageChartData } from "./MyComponent";

// exports from ./MyComponent.js file
export const ChartData = () => {}
export const TableData = () => {}

• as 구문을 사용하여 myModule(입력 예시)이라는 이름의 네임스페이스를 생성하고, 해당 네임스페이스를 통해 MyComponent.js에서 named export된 모든 항목에 접근할 수 있습니다.

// imports
import *as myModule from "./MyComponent";

// exports from ./MyComponent.js file
export const ChartData = () => {}
export const TableData = () => {}