JavaScript의 모듈 시스템은 코드의 재사용성과 유지보수성을 높이기 위해 코드의 특정 부분을 별도의 파일로 분리하고, 이를 필요에 따라 가져와서 사용할 수 있게 한다. 이러한 모듈 시스템은 여러 방식이 있고 오늘은 ES6 모듈에 대해 공부했다.

ES6모듈(ESM, ECMAScript Modules)

ES6 모듈은 ECMAScript 2015에서 도입된 표준 모듈 시스템으로 import와 export 키워드를 사용하여 모듈을 정의하고 가져온다.

---

Export

export 키워드는 다른 파일에서 사용할 수 있도록 변수, 함수, 클래스 등을 내보낼 때 사용된다.

Named Export

여러 개의 항복을 내보낼 수 있으며, 각 항목을 명시적으로 지정한다.

export const name = “shong”;
export function helloName() {
	console.log(“Hello, “ + name);
}

Default Export

모듈에서 단 하나의 항목을 기본으로 내보낼 때 사용한다. 모듈당 하나의 default export만 가질 수 있다.

export default function() {
    console.log(“Hello, shong”);
}

---

Import

import 키워드는 다른 파일에서 내보낸 항목을 가져올 때 사용한다.

Named Import

내보낸 이르모가 동일한 이름으로 가져온다. 중괄호 {}를 사용하여 여러 항목을 가져올 수 있다.

import { name, helloName } from ‘./module.js’;

console.log(name); //shong
helloName(); //Hello, shong

Default Import

내보낸 기본 항목을 가져올 때 사용한다. 중괄호를 사용하지 않으며, 이름을 임의로 지정할 수 있다.

import defaultFunction from ‘./module.js’;
defaultFunction(); // Hello, shong

default의 경우 하나만 가져오기 때문에 명칭은 아무렇게 써도 괜찮지만 named인 경우에는 중괄호 {}를 쓰고 명칭을 동일하게 작성해야 한다.

Combined Import

default export와 named export를 동시에 가져올 수 있다.

export const name = “shong”
export default function() {
	console.log(“Hello, shong”)
}

import defaultFunction, { name } from ‘./module.js’;
console.log(name); // shong
defaultFunction(); // Hello, shong

---

Re-exporting

다른 모듈로부터 가져온 것을 다시 내보낼 수 있다.

// moduleA.js
export const a = 1;

//moduleB.js
export { a } from ‘./moduleA.js’;

이는 moduleB를 통해 moduleA의 내용을 사용하는 코드이다.