[JS]export : Named, Default

two-threeMin·2022년 4월 24일

작성 계기

React를 이제 막 공부하기 시작했는데 강의를 보면 export default [component name]로 내보냈습니다.

const Test = () => {
  return (
    <div>
	...
    </div>
  );
};

export default Test;

Vanilla Javascript 토이 프로젝트를 할 때에는 export {..., ...}만 사용했었는데,
export 공식 문서를 보니 named exports와 default exports 두 타입이 있었고,
'막연하게 알고만 있을뻔 했구나..'해서 이번 글을 작성하게 되었습니다.

Two type of export(MDN)

Named exports

//export 방법
//export-test.js
export let myVariable = Math.sqrt(2);
export function myFunction() { /* ... */ };

export { myVariable, myFunction };

//import방법
//import-test.js
import { myVariable, myFunction } from './export-test.js';

"named Export" 는 여러 값을 내보낼 때 유용합니다.
가져갈 때는 내보낸 이름과 동일한 이름을 사용해야합니다.

Default exports


//export-test.js
const Compo = () => {...}

export default Compo; 

//import-test.js
import Com from './export-test.js';

"default export"는 어떤 이름으로도 가져올 수 있습니다.

어떤 이름으로도 가져올 수 있습니다. 에서
문득, 만약 개발을 누군가와 같이 한다면 '가져올 때 이름은 ~~로 해요' 와 같은 약속을 해야하는건가...?🤨

Eslint(Airbnb)에서는...

prefer-default-export
When there is only a single export from a module, prefer using default export over named export
모듈로부터 하나만 내보낼 때, named exports 보다는 default export를 선호한다.

Default Export를 반대하는 이유들

참고

직접 느껴본 것은 아니기 때문에 100% 이해한 것은 아니지만, 이유를 그대로 옮겨보자면

Named Export는 이름을 내보내기 때문에, IDE에서 자동으로 import 할 수 있어 생산성이 증가한다.

규모가 큰 데에서는 Refactoring이 불가능하다. (default로 가져온 모듈은 마음대로 이름을 명명할 수 있기 때문에)

Tree Shaking 측면에서 DX보다 낫다. DX로 거대한 객체를 내보낼 수 있는데, 객체 안 사용하지 않는 자원이 있을 수도 있기 때문이다.