자바스크립트 ES6 모듈 내보내기/불러오기 (import)
Apr 7, 2018 · 4 min read



자바스크립트 개발을 하다보면 requireimport 키워드를 통해 외부 라이브러리를 불러오는 코드를 자주 보게 됩니다. require는 NodeJS에서 사용되고 있는 CommonJS 키워드이고, import는 ES6(ES2015)에서 새롭게 도입된 키워드입니다. 두 개의 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만, 비슷한듯 약간씩 다른 문법 때문에 종종 우리를 혼란스럽게 하기도 합니다.

const moment = require("moment")
import moment from "moment"

예를 들어, 위 2줄의 코드는 기본적으로 MomentJS라는 라이브러리를 불러오는 동일한 작업을 수행하고 있습니다. CommonJS 방식을 따른 첫번째 코드는 Ruby처럼 require 키워드를 사용하여 여타 다른 변수를 할당하듯이 모듈을 불러오는 반면에, ES6 방식을 따른 두번째 코드는 Java나 Python처럼 import 키워드를 사용하여 좀 더 명시적으로 모듈을 불러오고 있습니다.

이번 포스트에서는 이 중 두 번째 방식인 ES6 기반 모듈 내보내기/불러오기 방법에 대해서 알아보겠습니다. CommonJS 기반 모듈 내보내기/불러오기에 대해서는 아래 포스트를 참고하시기 바랍니다.

ES6 모듈 시스템의 이점

아무래도 ES6 모듈 시스템이 좀 더 최신 스팩이다 보니 CommonJS 방식 대비 여러가지 이점들이 있습니다. 우선 import, from, export, default처럼 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 좋습니다. 또한 비동기 방식으로 작동하고 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면이 있습니다. 뿐만 아니라 앞으로 다룰 Named Parameter와 같이 CommonJS에서는 지원하지 않는 기능들이 있습니다.

복수 객체 내보내기/불러오기

먼저 하나의 자바스크립트 모듈 파일에서 여러 개의 객체를 내보내고 불러오는 방법을 알아보도록 하겠습니다.

내보내기

CommonJS에서는 내보낼 복수 객체들을 exports 변수의 속성으로 할당하는 방식을 썼었는데, ES6에서는 import 키워드의 짝꿍인 export 키워드를 사용해서 명시적으로 선언해줍니다. 이 때 내보내는 변수나 함수의 이름이 그대로 불러낼 때 사용하게 되는 이름이 되기 때문에 이를 Named Exports라고 일겉습니다.

아래는 미국과 캐나다 달러를 상호 변환해주는 자바스크립트 예제 코드입니다. 이 파일에는 3개의 함수가 있는데 아래 2개의 함수만 다른 파일에서 접근할 수 있도록 내보내기를 하였습니다. 첫번째 방법처럼 선언과 동시에 내보낼 수도 있고, 두번째 방법처럼 선언 후에 별도로 내보낼 수도 있습니다.

  • currency-functions.js
const exchangeRate = 0.91

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100
}

// 내보내기 1
export function canadianToUs(canadian) {
  return roundTwoDecimals(canadian * exchangeRate)
}

// 내보내기 2
const usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate)
}
export { usToCanadian }

불러오기

여러 객체(Named Exports)를 불러올 때는 ES6의 Destructuring 문법을 사용해서 필요한 객체만 선택적으로 전역에서 사용하거나, 모든 객체에 별명을 붙이고 그 별명을 통해서 접근할 수도 있습니다.

  • test-currency-functions.js
// Destructuring
import { canadianToUs } from "./currency-functions"

console.log("50 Canadian dollars equals this amount of US dollars:")
console.log(canadianToUs(50))

// Alias
import * as currency from "./currency-functions"

console.log("30 US dollars equals this amount of Canadian dollars:")
console.log(currency.usToCanadian(30))
  • 실행 결과
50 Canadian dollars equals this amount of US dollars:
45.5
30 US dollars equals this amount of Canadian dollars:
32.97

단일 객체 내보내기/불러오기

다음으로 하나의 자바스크립트 모듈 파일에서 단 하나의 객체를 내보내고 불러오는 방법을 알아보겠습니다.

내보내기

CommonJS에서는 내보낼 단일 객체를 module.exports 변수에 할당하는 방식을 썼었는데, ES6에서는 그 대신 export default 키워드를 사용해서 명시적으로 선언해줍니다. 하나의 모듈에서 하나의 객체만 내보내기 때문에 이를 Default Export라고 일겉습니다.

이번에는 예제 코드를 살짝 수정하여 아래 두 개 함수를 객체로 묶어서 내보내기를 하였습니다. (객체 내에서 첫 번째 함수는 ES6 문법을 사용하였습니다) 이름이 필요없기 때문에 별도로 변수 할당 없이 바로 객체를 내보내기를 할 수 있습니다. 내보낼 때 어떤 이름도 지정하기 않기 때문에 불러올 때도 아무 이름이나 사용할 수 있습니다.

  • currency-object.js
const exchangeRate = 0.91

// 안 내보냄
function roundTwoDecimals(amount) {
  return Math.round(amount * 100) / 100
}

// 내보내기
export default {
  canadianToUs(canadian) {
    return roundTwoDecimals(canadian * exchangeRate)
  },

  usToCanadian: function (us) {
    return roundTwoDecimals(us / exchangeRate)
  },
}

구지 꼭 변수에 할당하고 내보내기를 하고 싶다면 다음과 같이 작성할 수도 있습니다. 하지만 불러내는 쪽에서 반드시 이 obj라는 변수 이름을 사용하도록 강제되지는 않습니다.

const obj = {
  canadianToUs(canadian) {
    return roundTwoDecimals(canadian * exchangeRate)
  },
}

obj.usToCanadian = function (us) {
  return roundTwoDecimals(us / exchangeRate)
}

export default obj

불러오기

하나의 객체(Default Export)를 불러올 때는 간단하게 import 키워드를 사용해서 아무 이름이나 원하는 이름을 주고 해당 객체를 통해 속성에 접근하면 됩니다.

  • test-currency-object.js
import currency from "./currency-object"

console.log("50 Canadian dollars equals this amount of US dollars:")
console.log(currency.canadianToUs(50))

console.log("30 US dollars equals this amount of Canadian dollars:")
console.log(currency.usToCanadian(30))
  • 실행 결과
50 Canadian dollars equals this amount of US dollars:
45.5
30 US dollars equals this amount of Canadian dollars:
32.97

이상으로 ES6에서 모듈을 내보내고 불러내는 두 가지 방법인 Named Exports와 Default Export에 대해서 알아보았습니다.






Engineering Blog  by Dale Seo