JS #1. ES6에서 import/export 올바르게 이해하고 사용하기

JavaScript ES6에서 기존의 ES5와 비교해 보았을 때 많은 변화가 생겼다. 그 중의 하나는 ES6에서 컴포넌트 정의를 위한 모듈 형태를 지원한다는 것이다. 이 과정에서 기존의 자바스크립트에서 모듈을 정의한 방법인 AMD, CommonJS와는 다른 방식으로 모듈을 사용하게 되었다. 바로 import/export 문을 통해서 언어 내부적으로 자바스크립트 모듈 의존성을 지원하게 된 것이다. 이 글은 (과거의 나처럼) 기존의 CommonJS 방식의 require로 모듈을 불러오는 방식과 ES6의 import로 모듈을 불러오는 방식을 혼동하는 사람들을 위해서 작성하게 되었다.

먼저 기존의 CommonJS 방식의 모듈 사용 방식과 비교해 보았을 때 ES6 방식이 가진 장단점을 살펴보고 가자. ES6 방식이 가진 장점은 첫 번째로 가독성이 좋다. import, export, default 등의 모듈 관리 키워드를 사용하기 때문에 더 직관적으로 해당 작업을 이해할 수 있다. 두 번째로 비동기로 작동하고 실제로 쓰이는 부분만 불러올 수 있기 때문에 성능 및 메모리 측면에서 유리하다. 마지막으로 Named Parameter를 사용하여, 기존의 CommonJS에서는 지원하지 않는 기능이 추가되었다. 반대로 단점도 존재하는데, 이 문법은 ES6 문법이어서 babel과 같은 트랜스파일러가 없는 경우라면 CommonJS의 require 방식을 사용할 수 밖에 없다. 브라우저 자체에서 아직 ES6를 지원하지 않기 때문이다.

그러면 지금부터 ES6 방식으로 모듈을 내보내고 불러오는 방법을 알아보도록 한다.

---

export

ES6 방식으로 module을 export 하는 방식은 두 가지가 있다. 다음은 외화를 원화로 바꾸는 함수이다. 그리고 여기서 default 키워드가 있는데 하나의 모듈을 하나의 객체로 내보낼 때 사용한다.

// exchange.js

const dollarToWonRate = 1177.1;
const euroToWonRate = 1298.3;
const yenToWonRate = 10.8;
const cynToWonRate = 169.7;

// 첫 번째 export 방법
export function dollarToWonFn(dollar) {
  return dollar * dollarToWonRate;
};

// 두 번째 export 방법
const euroToWonFn = (euro) => {
  return euro * euroToWonRate;
};

export { euroToWonFn };

// default 키워드를 사용하여 export를 하는 방법
const yenToWonFn = (yen) => {
  return yen * yenToWonRate;
};

const cynToWonFn = (cyn) => {
  return cyn * cynToWonRate;
};

export default { yenToWonFn, cynToWonFn };

 

---

import

이렇게 함수를 export하고 나서 이 함수들을 다른 파일에서 import해서 사용하고 싶은 경우는 다음과 같이 불러올 수 있다. default export의 경우는 아무말이나 사용해서 import를 할 수가 있다.

// calculate.js

// 첫 번째 import 방법 : Destructuring
import { dollarToWonFn } from './exchange.js';

console.log(dollarToWonFn(10)); // 11771

// 두 번째 import 방법 : Alias
import * as currency from './exchange.js';

console.log(euroToWonFn(10)); // 12983

// export default를 import 하는 방법
import JpAndCn from './exchange.js';

console.log(JpAndCn.yenToWonFn(1000)); // 10800
console.log(JpAndCn.cynToWonFn(100)); // 16790

// 또는 아래 코드로 엔화와 위안화 변환 함수를 불러오는 것도 가능하다.
const { yenToWonFn, cynToWonFn } = JpAndCn;

console.log(yenToWonFn(1000)); // 10800
console.log(cynToWonFn(100)); // 16790

 

---

마치며

ES6에서 모듈 사용방식의 변화는 정말 큰 변화 중의 하나이고, 실제로 자주 쓰이는 부분이다. 하지만 CommonJS 등 기존의 방식과 혼용을 할 수가 있고, 아직은 브라우저에서 ES6를 지원하지 않다 보니 혼란을 느끼는 사람이 (나 말고도) 있을 것 같아서 이렇게 간단하게 정리를 해 보았다. 모듈 사용 방식을 잘 구별해서 사용해서 더욱 더 좋아진 ES6의 기능들을 마음껏 사용하기를 바란다.