ES6(또는 ECMAScript 2015)는 JavaScript의 새로운 버전으로, 개발자들이 모듈화된 코드를 작성하는 데 도움이 되는 몇 가지 새로운 기능을 도입했습니다. 이 포스트에서는 ES6 모듈의 사용법에 대해 알아보겠습니다.

1. 모듈이란 무엇인가?

모듈이란 코드 조각의 독립성을 유지하면서 재사용이 가능한 단위를 말합니다. JavaScript에서, 모듈은 기능적인 부분을 캡슐화한 파일이나 코드 조각을 의미합니다.

2. 모듈의 작성

ES6에서 모듈을 작성하기 위해서는 export 키워드를 사용하여 외부로 공개할 요소를 표시합니다.

예를 들어, utils.js 파일에 다음과 같은 코드가 있다고 가정해봅시다.

// utils.js
export function add(a, b) {
  return a + b;
}

export const pi = 3.14;

위의 코드에서 add 함수와 pi 상수를 외부에 공개하기 위해 export 키워드를 사용하고 있습니다.

3. 모듈의 사용

위에서 작성한 utils.js 모듈을 다른 파일에서 사용하기 위해서는 import 키워드를 사용합니다.

// main.js
import { add, pi } from './utils.js';

console.log(add(2, 3)); // 5
console.log(pi); // 3.14

위의 코드에서 utils.js 모듈의 add 함수와 pi 상수를 import 키워드를 이용하여 main.js 파일에서 사용하고 있습니다.

4. 기본 및 이름 있는 내보내기

ES6 모듈은 기본 및 이름 있는 내보내기가 가능합니다.

기본 내보내기(Default Export):

// utils.js
export default function subtract(a, b) {
  return a - b;
}

이름 있는 내보내기(Named Export)와 기본 내보내기(Default Export)를 함께 사용하는 예제:

// math.js
export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

export default function subtract(a, b) {
  return a - b;
}

결론

ES6 모듈을 사용하면 코드를 보다 체계적이고 모듈화된 방식으로 구성하여 재사용성을 높일 수 있습니다. 이를 통해 코드 유지보수성을 높이고, 협업을 향상시킬 수 있습니다.

더 자세한 내용은 MDN web docs를 참고하세요.