[JavaScript] default export와 named export의 차이점을 알아보자!

🚀  들어가며...

• 이번에 신규서비스 개발을 앞두고, default export로 코딩을 한 부분을 일괄적으로 named export 방식으로 수정하였는데 수정 할 겸 개념정리도 같이 해보았습니다.

 

📑 내용

Named Export와 Default Export의 차이 🧐

• Named Export 특징
  - 한 파일 내에서 여러개의 변수/클래스/함수를 Export 할 수 있습니다.
  - Import할 때 as 키워드를 사용해서 다른 이름을 지정할 수 있습니다.
• Default Export 특징
  - 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있습니다.
  - from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 있습니다.

 

Default Export

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

// import
import MyComponent from "./MyDefaultExport";

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

모듈의 이름이 무엇이든 간에 default로 내보낸 모듈은 어떤 이름으로든지 import할 수 있습니다.

// import
import MyDefaultComponent from "./MyDefaultExport";

// import
import NewComponent from "./MyDefaultExport";

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

하나의 파일 당 한 개의 모듈만 default export할 수 있기 때문에 어떤 이름을 붙이든 상관이 없습니다. 단, let, const를 바로 default export할 수는 없습니다.

// export 나쁜 예
export default const DataVisualization = () => {}

 

 

Named Export

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

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";

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

Named export 방식으로 내보내기를 하면, 해당 모듈을 불러오고자 하는 파일에서는 중괄호로 감싸서 불러와야 합니다. MyComponent.js 파일에서 2개 이상의 모듈을 내보내도 불러올 때는 한 개만 불러와도 됩니다.

// imports
// ex. giving a named import a different name by using "as":
import { ChartData as UsageChartData } from "./MyComponent";

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

Default export 방식으로 내보내기를 했을 때 마음대로 이름을 정해서 불러왔듯이, Named export 방식으로 내보내기를 했을 때도 이름을 다시 정해서 불러올 수 있습니다. ChartData 모듈을 불러올 때, import { ChartData as UsageChartData } from ~ 이런 식으로 이름을 재정의할 수 있습니다.

// imports
// ex. giving a named import a different name by using "as":
import { ChartData as UsageChartData, TableData } from "./MyComponent";

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

이렇게 두가지 방법으로 한번에 불러올 수 있습니다.

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

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

위와 같이 *를 쓰면 해당 파일에 있는 모든 모듈을 한꺼번에 불러올 수 있습니다.

 

활용예시

Default Export 예시

// import from RealTimeUsageByTime.js
import TimeUsageCharts from './TimeUsageChart/TimeUsageCharts';
import TimeUsageSummary from './TimeUsageSummary/TimeUsageSummary';
import MinuteUsageTable from './TimeUsageTable/MinuteUsageTable';

// export from TimeUsageCharts.js
const TimeUsageCharts = () => {}
export default TimeUsageCharts;

// export from TimeUsageSummary.js
const TimeUsageSummary = () => {}
export default TimeUsageSummary;

// export from MinuteUsageTable.js
const MinuteUsageTable = () => {}
export default MinuteUsageTable;

각각 TimeUsageCharts.js, TimeUsageSummary.js, MinuteUsageTable.js 파일에서 default로 내보내기한 컴포넌트를, 부모 컴포넌트이자 전체 페이지인 RealTimeUsageByTime.js에서 받아오는 예시입니다.

Named Export 예시

// exports from api.js
export const getUserProfileApi = () => {
	return apiCall(`${WEB_SERVER_API_BASE}/member/user/profile`);
};

export const getPlaceApi = () => {
	return apiCall(`${WEB_SERVER_API_BASE}/customer`);
};

export const smartViewApi = (placeCode, customerCode, currentDate) => {
  return apiCall(
    `${WEB_SERVER_API_BASE}/pp/realtime?placeCd=${placeCode}&custCd=${customerCode}&cronDt=${currentDate}`,
    'get',
    {
      placeCode,
      customerCode,
      currentDate,
    },
  );
};
...

// import modules from api.js
import { getUserProfileApi, getPlaceApi } from '../../../../Helpers/api';

api.js에는 수많은 API들이 모듈화되어 작성되어 있는데 그 중에서 필요한 API만 가져다 쓰기 위해 중괄호 안에 필요한 api만을 넣어서 불러오는 예제입니다.

 

 

언제 어떤 것을 사용해야 할까?

• Named Export는 여러 값을 내보내는데 유용합니다. 모듈을 가져올 때 동일한 이름을 사용해야만 해당 값을 참조할 수 있습니다.
• Default Export는 모듈당 하나의 Export만 가능합니다. 내보내기 되는 주체는 함수, 클래스, 객체 등 다양한 것이 될 수 있습니다. 이 값은 main Exported Value로 간주됩니다.

 

🙋🏻‍♂️ 후기

둘다 사용하기에 큰차이가 없을 경우에는 Default export가 크기가 더 작다고 합니다! 참고하시며 개발하시면 더 좋을것 같습니다.

 

🔗  참고한 글

https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad

Why we have banned default exports in Javascript and you should do the same

https://medium.com/@_diana_lee/default-export%EC%99%80-named-export-%EC%B0%A8%EC%9D%B4%EC%A0%90-38fa5d7f57d4

default export와 named export 차이점