Module이란..?

한 파일안의 작성되어진 코드
웹 애플리케이션을 구성하는 기능들을 분할한 단위

• 코드를 그 파일 내부로 한정하여 전역적으로 등록되어지는 것을 막고 충돌을 방지
• 서로 다른 파일에서 각 파일의 코드에 접근이 불가하므로 제공하고자 하는 모듈에서 export, 사용하고자 하는 모듈에서 import를 하면 된다.
• 파일들간의 중복적으로 발생할 수 있는 이름 충돌을 방지
• 모듈간의 재사용성도 높여준다.

Export & Import

export

• 파일 안에서 정의된 이름으로 import 해야 한다.
• import할때 {} 안의 동일한 이름으로 가져와야 한다.

// module1.js
import { foo } from '상대경로/module2.js'

foo(); // 'foo'

//module2.js
export function foo() {
  console.log('foo');
}

• as를 이용하면 다른 이름으로 변경해서 호출 가능

// module1.js
import { foo as bar} from '상대경로/module2.js'

bar(); // 'foo';

//module2.js
export function foo() {
  console.log('foo');
}

• export 되는 모든 것들을 받아오고 싶다면 * 사용

import * as calculator from '상대경로/module2.js'

calculator.add(1, 3);
calculator.minuse(3, 1);

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

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

export default

• import에서 사용하고자 하는 이름을 정의해서 사용 가능하다.
• 한 파일안에서 export default는 하나만 사용가능
• import할때 {} 없이 바로 사용 가능

// module1
import addFunction from '상대경로/module2.js';
addFunction(1, 4); // module2 - add()

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