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는 여러 단점으로 인해 사용을 지양하는 분위기입니다. 타입 스크립트 딥 다이브에서 소개하고 있는 단점을 제목만 살펴보면 다음과 같습니다.
- CommonJS와의 상호 운용 문제
- 낮은 검출성
- 자동완성 문제
- 오타방지
- 타입스크립트 자동 import
- 다시 expor 하기
- 동적 가져오기
- 클래스나 함수가 아니면 2줄 필요
여러 커뮤니티에서도 이러한 default export의 문제점을 거론하고 있는데요. 따라서 굳이 default export를 사용하지는 않고 이해하는 수준으로만 정리하면 될 것 같습니다. 분명 사용하는 개발자도 있겠죠? 그때 이런 거구나 하고 넘어가시면 되겠습니다.
여기까지 읽어주셔서 감사합니다.
'웹개발 > TypeScript' 카테고리의 다른 글
타입스크립트 | 제네릭 함수 (0) | 2022.08.17 |
---|---|
타입스크립트 | 제네릭, 타입매개변수, Array<T> (0) | 2022.08.15 |
타입스크립트 | 모듈 이란?, 모듈 모맷, import와 export (0) | 2022.08.10 |
타입스크립트 | 인터페이스 확장 interface extends (0) | 2022.08.05 |
타입스크립트 | 함수 타입 인터페이스 (0) | 2022.08.03 |
최근댓글