자바스크립트 ES6모듈 내보내기/불러오기(export/import)

하나의 파일에서 다른 파일의 코드, 외부 라이브러리를 불러오고 싶다.

 

example:

import moment from "moment";

위 코드는 MomentJS라는 라이브러리를 불러오는 작업을 수행하고 있다.

 

 

 

# ES6 모듈 시스템의 이점

- import, from, export, default처럼 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 좋다.

- 비동식 방식으로 작동

- 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면이 있다.

 

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

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

 

## 내보내기

import 키워드의 짝꿍인 export 키워드를 사용해서 명시적으로 선언한다.

이때 내보내는 변수나 함수의 이름이 그대로 불러올 때 사용하게 되는 이름이 되기 때문에 Named Export라고 일컫는다.

 

example : 

아래는 미국과 캐나다 달러를 상호 변환해주는 자바스크립트 예제 코드이다. 이 파일에는 3개의 함수가 있다.

아래 2개의 함수만 다른 파일에서 접근할 수 있도록 내보내기(export)를 해보자.

• 첫번째 내보내기 방법 : 선언과 동시에 내보내기 
• 두번째  내보내기 방법 : 선언 후에 별도로 내보내기

 

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 Export)를 불러올 때,

1/ ES6의 Destructuring 문법을 사용해서 필요한 객체만 선택적으로 전역에서 사용하거나,

2/ 모든 객체에 별명을 붙이고 그 별명을 통해서 접근할 수도 있다.

 

test-currency-functions.js 파일

import { canadianToUs } from "./currency-functions"; //ES6의 Destructuring 문법을 사용해서 필요한 객체만 선택적으로 전역에서 사용

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

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

 

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

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

 

 

## 내보내기

export default 키워드를 사용해서 명시적으로 선언해준다.

하나의 모듈에서 하나의 객체만 내보내기 때문에 이를 Default Export라고 일컫는다.

 

이번에는 아래 두개의 함수를 객체로 묶어서 내보내기를 해보자.

- 객체명이 필요 없으므로, 별도로 변수할당 없이 바로 객체를 내보내기 할 수 있다.

- 내보낼 때 어떤 이름도 지정하지 않기 때문에, 불러올 때도 아무 이름이나 사용할 수 있다.

 

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

 

위 코드에서 객체 내 '첫번째 함수'는 ES6 문법을 사용하였다.

 

** 이런 코드가 주어지면, 아래 코드로 줄일 수 있다.

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Method_definitions

var obj = {
 foo: function (){},
 bar: function (){},
}

↓

var obj = {
 foo() {},
 bar() {},
}

 

 

굳이 꼭 변수에 할당하고 export를 하고싶다면, 다음과 같이 작성 가능하다.

*하지만 import시, 반드시 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

 

 

출처:https://www.daleseo.com/js-module-import/#%EB%B3%B5%EC%88%98-%EA%B0%9D%EC%B2%B4-%EB%82%B4%EB%B3%B4%EB%82%B4%EA%B8%B0%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0