들어가며

여러 가지 프로젝트들을 진행하면서 named export 와 default export 가 혼용되어 사용되고 있어서 어떤 방법을 이용하는 것이 더 좋을까? 하는 생각에 찾아본 내용에 대해 정리해 보았어요.

named export

const Component1 = () => {};
const Component2 = () => {};

export { Component1, Component2 };

import { component1, component2 } from '@components/Components';

named export의 장점

• 명시적인 import
  이름을 지정하여 내보내기 때문에, 다른 파일에서 해당 이름을 사용하기 위해서는 명시적으로 import 구문을 사용해야 해요. 코드의 가독성을 향상시키고, 어떤 모듈에서 어떤 이름을 사용하는지 명확하게 알 수 있어요.
• 여러 개의 내보내기
  named export를 사용하면 한 모듈에서 여러 개의 변수, 함수, 클래스 등을 내보낼 수 있어요. 모듈을 구성하는 다양한 요소를 독립적으로 재사용하고 조합할 수 있도록 해요.

named export의 단점

• 불필요한 복잡성
  한 모듈에서 여러 개의 요소를 내보내는 경우, 사용자는 해당 모듈을 import 할 때 필요한 요소만 가져오도록 신경 써야 해요. 이로 인해 개발자들이 불필요한 복잡성에 직면할 수 있어요.

default export

export default function Component1() {}

const Component2 = () => {};
export default Component;

import Component1 from '@components/Component1';
import MyComponent from '@components/Component2';

default export의 장점

• 간결한 import
  default export를 사용하면 내보내기 된 요소를 import 할 때 이름을 지정하지 않아도 돼요. 코드를 더 간결하게 만들어주고, 사용자가 모듈을 쉽게 가져와서 사용할 수 있도록 해요.
• 단일 요소 내보내기
  default export는 한 모듈에서 단일 요소만 내보낼 수 있어요. 모듈을 좀 더 단순하게 구성할 수 있고, 특정 요소가 핵심적인 역할을 할 때 유용해요.

default export의 단점

• 명확성 부족
  default export를 사용하면 모듈에서 내보낸 요소가 하나뿐이므로, 해당 요소가 무엇인지 명확히 알기 어려울 수 있어요. 다른 파일에서 해당 모듈을 사용할 때 어떤 요소를 가져올지 파악하기 위해서는 해당 모듈의 코드를 살펴봐야 해요.

성능상의 차이도 있을까?

named export와 default export의 성능 측면에서는 일반적으로 큰 차이가 없어요. 이 두 가지 내보내기 형식은 모두 JavaScript 모듈 시스템의 일부로써 동작하며, 실제 실행 시 성능 차이는 거의 무시될 수준이에요.

성능 측면에서 실제로 중요한 요소는 모듈의 크기와 로딩 시간이에요. 모듈의 크기가 클수록 다운로드 시간이 오래 걸리고, 로딩 시간이 늘어날 수 있어요. 성능 최적화를 위해서는 모듈의 크기를 최소화하는 것이 중요해요.

named export와 default export의 선택은 일반적으로 성능에 직접적인 영향을 주지 않아요. 대신 모듈의 내용과 구조, 재사용성, 코드의 가독성 등을 고려하여 선택해야 해요. 성능 측면에서 주의해야 할 점은 모듈의 크기를 최소화하고, 필요한 요소만을 import 하는 것입니다. 이를 위해서는 번들러(예: Webpack)를 사용하여 코드를 압축하고 최적화하는 것이 좋아요.

tree shaking

Tree shaking은 번들러가 사용하지 않는 코드를 자동으로 제거하는 최적화 기법이에요. 애플리케이션의 번들 크기를 줄일 수 있고, 불필요한 코드 실행을 방지하여 성능을 향상시킬 수 있어요. Tree shaking은 주로 ES 모듈(ESM) 형식의 코드에서 잘 작동해요.

named export와 default export의 관점에서 Tree shaking을 고려할 때, 일반적으로 named export가 default export보다 Tree shaking에 더 용이한 형태에요.

• named export
  named export는 개별적인 요소들을 명시적으로 내보내기 때문에, 번들러는 사용되지 않는 요소들을 쉽게 식별하여 제거할 수 있어요. 번들러는 해당 요소가 다른 곳에서 참조되지 않는다면 해당 요소를 트리 쉐이킹하여 제외할 수 있어요.
• default export
  번들러는 default export된 요소를 모듈 내에서 항상 사용된다고 가정하고 번들링헤요. default export된 요소 중에서 사용되지 않는 부분을 제거하기 위해서는 추가적인 분석과 최적화가 필요할 수 있어요.

named export와 default export 중에서 Tree shaking을 고려한다면 named export를 선호하는 것이 일반적이에요. 프로젝트에 따라 default export도 효과적으로 사용될 수 있으며, 번들러의 설정과 성능 테스트를 통해 최적화하는 것이 중요헤요.

마치며

그래서 뭐 써야 돼?

개별 요소를 독립적으로 재사용하고 싶을 경우 named export를 사용하고, 모듈이 주로 단일 요소로 구성되어 간결한 구조가 필요한 경우 default export를 사용할 수 있어요.
named export와 default export는 결국 각각의 사용 사례와 개발자 선호도에 따라 선택되는 것 같아요. (은탄환은 없다니까..)