HyeGyeong
HyeGyeong 프로그래머를 꿈꾸며 JavaScript 공부 중

[JS-Basic] ES6 Module

[JS-Basic] ES6 Module

Module System?

  • 우리가 작성하는 코드를 여러 개의 파일과 디렉토리로 나누는 기능.
  • 나누어진 코드들은 필요할 때 서로 참조할 수 있어야 한다.
  • 나눠진 코드들을 효율적으로 읽어 들일 수 있어야 한다.

ES6 Module?

  • ES6 모듈은 "use strict;"를 적지 않아도 ‘strict’ 모드로 처리된다.
  • 모듈 안에서 import, export 키워드를 사용할 수 있다.

export?

  • 모듈 안에서 선언한 코드들은 해당 모듈 안에서만 참조가 가능하다. 외부에서 모듈로 선언한 항목을 사용하고 싶다면, 해당 항목을 export 해야한다.
1
2
3
4
5
6
7
8
9
10

// index.js
// 외부에서 사용 가능
export const square = x => x * x;

// 해당 모듈 안에서만 사용 가능. 외부에서 사용 X.
const add = (x, y) => x + y;

// other file
import { square } from 'index.js';
console.log(square(3)); // 9
  • export 대상을 모아서 하나의 객체로 한번에 export 할 수도 있다.
1
2
3
4
5
6
7

// calculate.js
const add = (x, y) => x + y;
const minus = (x, y) => x - y;
const multi = (x, y) => x * y;
const division = (x, y) => x / y;

export { add, minus, multi, division };
  • 모듈에서 하나만 export 할 때는 default 키워드를 사용할 수 있다.
1
2
3
4

// calculate.js
function (x, y) { return x + y };

export default;

위 코드 축약.

1

export default (x, y) => x + y;

import?

  • export한 모듈을 사용하려면 export한 이름으로 import 해야한다.
1
2
3
4

import { add, minus, multi, division } from 'calculate.js';

console.log(add(1, 2)); // 3
console.log(multi(3, 5)); // 15
  • 한 번에 import 할 수도 있다.
1
2
3
4
5

import calc from 'calculate.js';
// import * as calc from 'calculate.js';를 축약

console.log(calc.add(1, 2)); // 3
console.log(calc.division(15, 3)); // 5