[TIL] export vs export default

바닐라JS로 프로그램을 만들던 중 export에 대한 궁금증이 생겼다.

(named) export vs export default

export

• 한 모듈에 여러 개체들, 혹은 특정 개체만을 각각 가져올 수 있음
• 반드시 지정된 이름으로만 import 해야함

  import { hello } from './hello.js'

export default

• 해당 모듈에 하나의 개체 (변수, 클래스, 함수 등)만 있다는 의미 ⇒ 해당 모듈의 전체를 export 하는 느낌
• 원하는 이름으로 import 가능

  import helloTest from './hello.js'

무엇을 사용해야 될까?

• airbnb convention에 의하면 내보내기 할 것이 한 가지이면 export default 사용하는 것을 권장한다고 한다
  • default 사용이 읽기 편하고, 유지보수성이 좋고, treeshaking이 가능해서
    • style-guide
• treeshaking : 웹 성능 최적화 관련.
  • 코드를 빌드할 때 쓰지 않는 코드를 제외하는 것
  • 필요한 부분만 골라 쓴다

참고

• A.js의 a 객체, B.js의 b 객체를 각각 export default 한 뒤 hi.js라는 파일에서 a와 b를 import 하려고 하면 import 문이 두 줄이 들어가게 된다.
• 여러 줄의 import 문이 거슬리는 경우 index.js 등의 파일명으로
  • 아래처럼 export { default as a } from ‘~’ 으로 한 파일에서 관리하면

    export { default as CarNameValidator } from './carName/CarNameValidator.js'; 
    export { default as CommonValidator } from './common/CommonValidator.js';

  • a 사용 시 아래처럼 깔끔하게 사용 가능하다

    import { CommonValidator, CarNameValidator } from '../validator/index.js';

  • as A : A라는 이름으로 export 하겠다 (as == 별칭)

참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import