LHJ

I'm a FE developer.

ES6 모듈문법 - default name

21 Sep 2020 » js_module

default name

default 키워드는 기본 내보내기를 참조하는 용도로 종종 사용됩니다.
함수를 내보낼 때 아래와 같이 함수 선언부와 떨어진 곳에서 default 키워드를 사용하면, 해당 함수를 기본 내보내기 할 수 있습니다.

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// 함수 선언부 앞에 'export default'를 붙여준 것과 동일합니다.
export {sayHi as default};

흔지 않지만 user.js 라는 모듈에 default export 하나와 다수의 named exoprt가 있다고 해봅시다.

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

아래와 같은 방식을 사용하면 default export와 named export를 동시에 가져올 수 있습니다.

// main.js
import {default as User, sayHi} from './user.js';

new User('John');

* 를 사용해 모든 것을 객체 형태로 가져오는 방법도 있는데, 이 경우엔 default 프로퍼티는 정확히 default export를 가리킵니다.

// main.js
import * as user from './user.js';

let User = user.default; // default export
new User('John');