ES Module Export (Default, Named)

모듈 시스템을 사용하는 이유는, 쪼개져있는 코드들을 효율적으로 불러다 쓰기 위해서다.

module을 잘 활용하면 깔끔하고 효율적인 코드를 작성할 수 있다.

 

Named Export

- 지정된 이름을 사용하는 export

- 한 파일에서 여러 객체를 export할때 사용

 

// exp.js
export const num = 100;
export const foo = (a) => a + 1;
export class bar {};



// imp.js
import { num, foo, bar } from './exp.js';

 

import시 정의된 것과 이름을 사용해야 하며,

변경을 원하는 경우 import { foo as f } 로 사용할 수 있다.

 

한번에 전체 export를 가져오고 싶은 경우

// imp.js
import * as exp from './exp.js';
exp.foo(exp.num); // 101;

로 사용가능하다.

 

 

Default Export

- export할 대상을 미리 지정해놓는 것. 뭘 export할지 정해져 있으므로 import시 이름을 몰라도 상관없다.

// exp.js
const num = 100;
const foo = (a) => a + 1;
class bar {};

export default num;


// imp.js
import hundred from './exp.js'; // 아무 이름으로나 import 가능
console.log(hundred); // 100
// hundred = num 이라고 생각하면 됨

 

원하는 것 여러 개를 골라 export할수도 있다.

// exp.js
const num = 100;
const foo = (a) => a + 1;
class bar {};

export default {num, foo};


// imp.js
import newExpAnyName from './exp.js'; // 아무 이름으로나 import 가능
newExpAnyName.num; // 100
// newExpAnyName = {num: 100, foo: (a) => a + 1} 라고 생각하면 됨

 

 

Named와 Default가 섞여있어도 사용할 수 있다.

// exp.js
const num = 100;
export const foo = (a) => a + 1;
export default num;



// imp.js
import hundred, { foo } from './exp.js'

 

 

 

어느 것을 사용할지에 대해서는 의견이 분분하고, 취향의 영역에 가까운 듯 하다.

내 경우, 딱 정해진 건 아니지만.. 주로 아래처럼 사용한 것 같다.

 

Default Export

• 한 파일에 포함되어 있는 객체들을 가져다 쓸 때, 여러 객체가 함께 사용될 가능성이 높은 세트가 존재한다.

  calculateOrder.js 에 tax, discount, sum 등의 함수가 있는 경우

• 네이밍에 있어 충돌할 우려가 있거나, 어디서 불러다 쓰는지에 따라 의미가 약간 변하는 경우

  order같은 흔한 네이밍인 경우 어차피 불러다쓸 때 다른 이름으로 바꿔야할 가능성이 높으므로..(애초에 이렇게 안짓는게 좋기는 하겠지만)

  가격 총합을 구하기 위해 sumNumbers라는 함수를 import해서 사용했는데, getTotalPrice같은 이름으로 사용하는 것이 더 자연스러워 보인다.

 

Named Export

• 한 파일에서 일부만 불러다 쓸 가능성이 높은 경우
• 정확한 이름을 사용해야 좋은 경우

  defaultDiscountPercentage 등 의미가 중요한 상수값처럼..