export default

모듈은 크게 두 종류로 나뉩니다.

1. 복수의 함수가 있는 라이브러리 형태 모듈(이전 예시의 say.js)
2. 개체 하나만 선언되어있는 모듈(아래의 user.js : class User 하나만 내보내기함)

대개는 두 번째 방식으로 모듈을 만드는 것을 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.

그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없습니다.
그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않습니다.

모듈은 export default라는 특별한 문법을 지원합니다.
export default를 사용하면 ‘해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.

내보내고자 하는 개체 앞에 export default를 붙여봅시다.

// user.js
export default class User { // export 옆에 default를 추가해보았습니다.
    constructor (name) {
        this.name = name;
    }
}

파일 하나엔 대개 export default가 하나만 있습니다.
이렇게 default를 붙여서 모듈을 내보내면 중괄호 {} 없이 모듈을 가져올 수 있습니다.

// main.js
import User from './user.js'; // {User} 가 아닌 User로 클래스를 가져왔습니다.

new User('John');

중괄호 없이 클래스를 가져오니 더 깔끔해 보이네요.
모듈을 막 배우기 시작한 사람은 중괄호를 빼먹는 실수를 자주합니다.
named export 한 모듈을 가져오려면 중괄호가 필요하고,
default export 한 모듈을 가져오려면 중괄호가 필요하지 않다는 걸 기억해 실수를 방지합시다.

• named export

  export class User {}
  

  import {User} from ...
  

• default export

  export default class User {}
  

  import User from ...
  

사실 named export와 default export를 같은 모듈에서 동시에 사용해도 문제는 없습니다.
그런데 실무에선 이렇게 섞어 쓰는 사례가 흔치 않습니다.
한 파일엔 name export나 default export 둘 중 하나만 사용합니다.

파일당 최대 하나의 default export가 있을 수 있으므로 내보낼 개체엔 이름이 없어도 괜찮습니다.
아래 예시의 개체엔 이름이 없지만 모두 에러 없이 잘 동작합니다.

export default class { // 클래스 이름 없음
    constructor() {}
}

export default function (user) { // 함수 이름이 없음
    alert(`Hello, ${user}!`);
}

// 이름 없이 배열 형태의 값을 내보냄
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

export default는 파일당 하나만 있으므로 이 개체를 가져오기 하려는 모듈에선 중괄호 없이도 어떤 개체를 가지고 올지 정확히 알 수 있으므로 이름이 없어도 괜찮습니다.

default를 붙이지 않았다면 개체에 이름이 없는 경우 에러가 발생합니다.

export class { // 에러! (default export가 아닌 경우엔 이름이 꼭 필요합니다.)
  constructor() {}
}