November 20, 2021

export와 import 지시자는 다양한 방식으로 활용됩니다.

이전 챕터에서는 export와 import의 기본적인 사용법을 알아보았는데, 이번 챕터에선 좀 더 다양한 사용법을 배워보겠습니다.

선언부 앞에 export 붙이기

변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다.

아래 내보내기는 모두 유효합니다.

// 배열 내보내기
*export* let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
*export* const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
*export* class User {
  constructor(name) {
    this.name = name;
  }
}

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;
  }
}