JavaScript_ ES6 - Named Exports vs Default Exports

Adela·2020년 11월 23일
0

JavaScript

목록 보기
15/17
post-thumbnail
post-custom-banner

MDN export

Named Exports

export - 모듈 정의 후 export할 값들을 내보낸다.

// module.js
function foo(x) {
  return x * x * x;
}

const bar = (num) => Math.floor(num);

var graph = {
  options: {
    color:'white',
    thickness:'2px'
  },
  draw: function() {
    console.log('From graph draw function');
  }
}

export { foo, bar, graph };

이것처럼 한 파일에서 여러 값을 내보낼 때 유용하다.

import - export한 값의 이름과 동일한 이름을 import 해야한다.
만약 import하는 파일 내에서 다른 변수명으로 사용하고 싶다면

import { foo, bar, graph as newGraph } from './module';

newGraph.options.color;   // "white";

으로 이름을 재정의 해준다.

Default Exports

export - 하나의 파일에서 단 하나의 객체만 export 할 수 있다.

// module.js
export default function (x) {
  return x * x;
}

import - export한 값의 이름이 아니더라도 쓰고 싶은 이름으로 import 가능하다.
또, default 키워드와 함께 export한 모듈은 {} 없이 임의의 이름으로 import한다.

파일 하나에 하나의 객체만 export 하기 때문인가보다.

import square from './module';

let result = square(10);
result;   // 100


함께 작업하는 사람이 있다면 팀 규칙에 맞게 사용하면 좋을 것 같다.
유지보수를 위해서는 Named Export가 더 효율적이라는 의견도 있다고 한다.

파일 하나에서 하나만 export 하는 모듈 => default export

파일 하나에서 여러 값을 export 하는 모듈 => named export

profile
👩🏼‍💻 SWE (FE)
post-custom-banner

0개의 댓글