[JS Module]export default는 피해야한다?

export 하기

//say.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
export function sayBye(user) {
  alert(`Bye, ${user}!`);
}

내보내는 파일은 'use strict'의 존재 유무와 상관없이 무조건 원격모드로 작동한다.

import하기

• 일반적인 import

//main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

• 가져올 함수/클래스가 많다면?

//main.js
import * as say from './say.js';
say.sayHi('John');
say.sayBye('John');

하지만 이름의 간결성을 고려하고, 리팩토링이나 유지보수를 생각하면 대상을 구체적으로 명시하는 것이 좋다.

import, export시 이름 바꾸기

import {sayHi as hi, sayBye as bye} from './say.js';
hi('John'); // Hello, John!
bye('John'); // Bye, John!

import시 이름을 바꿀 수 있다.

//say.js
...
export {sayHi as hi, sayBye as bye};
//main.js
import * as say from './say.js';
say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

export시에도 as를 사용할 수 있다.

모듈 다시내보내기(re-export)

export {sayHi} from './say.js'; // sayHi를 다시 내보내기 함
export {default as User} from './user.js'; // default export를 다시 내보내기 함

export...from...문법으로 가져온 개체를 다시 즉시 내보낼 수 있다.

export default?

모듈은 두가지 종류로 나뉜다.
1. 복수의 함수가 있는 모듈(say.js와 같은 형태)
2. 개체 하나만 선언되어 있는 모듈(한 모듈당 함수/클래스가 하나)
.
2번의 경우 자연스레 파일이 많아질 수 밖에 없다.(파일 관리만 잘하면 전혀 문제는 없음)
이때 export default를 사용하면 해당 모듈엔 개체 하나만 있다는 사실을 명확히 나타낼 수 있다.

//user.js
export default class User { //default가 붙은 상태
  constructor(name) {
    this.name = name;
  }
}
//main.js
import User from './user.js'; //{}중괄호 필요없다!
new User('John');

이렇게 모듈을 내보내면, 중괄호 없이 모듈을 가져올 수 있다!
심지어 default를 사용할 경우, 명확하므로 이름없이 클래스나 함수를 선언하고 가져올 수도 있다.(import시 내가 원하는 이름을 정하거나 수정할 수 있기때문)
일반적인 export를 named export라고 하고, 방금 한 export를 default export라고 한다.
보통은 섞어 쓰지 않고, 한 종류만 사용한다.

default export를 쓰는 것은 어떤 영향을 미치는가?

1. default exports는 import하는 곳에 따라 자유자재로 이름을 붙여줄 수 있기 때문에,
   같은 모듈이더라도 사용처에 따라 이름이 달라질 수 있다.
   이는 곧 큰 단위의 리팩토링을 어렵게 만드는 요인이 된다.
   반면, named export는 모든 사용처에서 동일한 이름을 사용한다.
2. named exports는 export 되는 값들에 이름을 부여하기 때문에,
   IDE가 이를 찾아서 자동으로 import를 도와줄 수 있다. (생산성 향상)
3. 큰 객체를 default export하면 webpack에서 번들링할때 tree-shaking이 불가능하게 된다고 한다.(이건 좀 더 찾아봐야할듯)
   그러므로 왠만해선 안쓰는 방향으로 해야겠다.

참고하면 좋은 사이트

• mdn web docs
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• javascript.info
  https://javascript.info/import-export#ref-25