반응형

Default Export 이해하기

default export는 모듈에서 하나의 항목만 내보내려는 경우에 가장 유용합니다. 디폴트 익스포트의 장점은 해당 항목을 default export로 지정하면 다른 모듈에서 이름을 몰라도 import 할 수 있다는 점입니다. 모듈의 default export는 기본적으로 export와 동일한 일을 하지만 사용 사례와 구문이 약간 다릅니다.

 

위 예에서 movie.ts라는 파일에서 하나의 클래스를 export 하고 있습니다. 다른 export와 다른 점은 export 키워드 뒤에 default 키워드를 추가했다는 점입니다. 또 다른 다른점은 클래스의 이름이 존재하지 않는다는 것입니다. default export에서 이름을 지정하는 것은 선택사항입니다. 이유는 import로 사용할 모듈에서 이름을 알 필요가 없기 때문입니다.

 

다른 모듈에서 import 문을 사용하면 클래스를 가져올 수 있습니다.  import 키워드 뒤에 default export에서 가져올 항목을 현재 모듈에서 제공하려는 이름을 지정한 다음 위치를 설정하기만 하면 됩니다. 가져오는 쪽에서는 이름이 없던 클래스를 ActionMovie라고 지정해 주고 있습니다. 또한 default export는 단 하나의 항목만 존재하므로 이름을 중괄호로 묶을 필요가 없습니다.

import 한 후에는 다른 클래스와 마찬가지로 지정한 이름을 사용하여 클래스의 새 인스턴스를 만들 수 있습니다.

 

default export를 사용해서는 안된다?

default export는 여러 단점으로 인해 사용을 지양하는 분위기입니다. 타입 스크립트 딥 다이브에서 소개하고 있는 단점을 제목만 살펴보면 다음과 같습니다.

  1. CommonJS와의 상호 운용 문제
  2. 낮은 검출성
  3. 자동완성 문제
  4. 오타방지
  5. 타입스크립트 자동 import
  6. 다시 expor 하기
  7. 동적 가져오기
  8. 클래스나 함수가 아니면 2줄 필요

여러 커뮤니티에서도 이러한 default export의 문제점을 거론하고 있는데요. 따라서 굳이 default export를 사용하지는 않고 이해하는 수준으로만 정리하면 될 것 같습니다. 분명 사용하는 개발자도 있겠죠? 그때 이런 거구나 하고 넘어가시면 되겠습니다.


여기까지 읽어주셔서 감사합니다.

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기