ES6모듈화

ES6부터는 import와 export키워드를 통해 모듈을 불러오고, 내보낼 수가 있습니다.

Common JS vs ES6모듈

기존의 Common JS에서는 require키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러오는 반면, ES6기반의 모듈의 내보내기와 가져오기의 경우 import, from, export, default키워드를 통해 조금 더 명시적으로 모듈을 불러 올 수 있습니다.

특히, ES6모듈의 경우 비동기 방식으로 작동을 하고 파일 내부에서도 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리합니다.

또한 Named Parameter와 같이 CommonJS에서는 지원하지 않는 기능을 지원하며 이전 방식들보다 여러가지 이점을 가지고 있습니다.

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

Common JS에서는 내보낼 복수 객체들을 변수에 할당하는 방식을 썼다면, ES6에서는 export키워드를 통해 내보낼 때 사용한 함수나 변수의 이름을 import키워드에 그대로 사용을 해 불러올 수 있습니다. 이렇게 이름을 지정해서 내보내는 방식을 Named Exports라고 합니다.

1. 내보내기(export)

1-1. Named export

const num = 10;
export { num }

위와 같이 미리 선언된 변수나 함수를 export할 수 있으며 아래와 같이 바로 export키워드를 이용해 내보낼 수도 있습니다.

export const str = '안녕하세요'

1-2. Default export

Default export의 경우 모듈당 딱 하나의 멤버에만 선언을 할 수 있습니다. 따라서 나머지의 경우 Named export를 사용합니다.

let a = 10;
let b = 20;

export default a; //default export

export { b } //Named export

함수내보내기

export function random() {
  return Math.floor(Math.random() * 10)
}

변수내보내기

export const user = {
  name: '0seo!',
  age: 85
}