[JS] Module의 개념 및 import/export 정리

Javascript Module 이란?

 

개발을 하면서 애플리케이션의 규모가 커지다보면 파일을 여러 개로 분리해야 하는 시점이 오는데, 이때 분리된 파일 각각을 모듈(Module)이라고 부릅니다.

 

모듈은 대부분 하나의 Class나 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

 

모듈은 하나의 파일, 하나의 스크립트라고 할 수 있는데, 모듈에 import/export를 적용하면 다른 모듈을 불러와서 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

 

모듈은 크게 두 종류로 나뉩니다.

1. 복수의 함수가 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어있는 모듈

대개는 두 번째 방식으로 모듈을 만드는 걸 선호하기 때문에 함수, 클래스, 변수 등의 개체는 전용 모듈 안에 구현됩니다.

 

그런데 이렇게 모듈을 만들다 보면 자연스레 파일 개수가 많아질 수밖에 없습니다. 그렇더라도 모듈 이름을 잘 지어주고, 폴더에 파일을 잘 나눠 프로젝트를 구성하면 코드 탐색이 어렵지 않으므로 이는 전혀 문제가 되지 않습니다.

 

모듈은 export default라는 특별한 문법을 지원합니다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.

 

모듈 export

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

파일이나 모듈 안의 함수나 객체를 export 하는데 사용되는 지시자로, exportd에는 'Named exports'와 'Default exports' 2가지 방법이 존재합니다.

 

1. Named exports

export const arrs = [10, 20, 30, 40]; // 개별로 선언해서 export
 
export { arrs2, getName }; // 묶어서 export
 
const arrs2 = [100, 200, 300, 400];
function getName() {
    return "aaaaaaaaa";
}

Named exports는 여러 개의 값을 export 하는데 사용

 

2. Default exports

JAVASCRIPT
let cube = function cube(x) {
    return x * x * x;
}
export default cube;

Default exports는 모듈 당 단 1개의 default export하는데 사용합니다. (하나의 객체, 함수 클래스 등)

 

모듈 import

// named
import * as name from "module-name";
import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name"; // member이름이 길 경우 as 별명 가능
import { member1, member2 } from "module-name";
import { member1, member2 as alias2, [...] } from "module-name";
 
 
// default
import defaultMember, { member [, [...]] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
/*
   name : 가져온 값을 받을 객체 이름.
   member, memberN : export 된 모듈에서 멤버의 이름
   defaultMember : export 된 모듈의 default 이름
   alias, aliasN : export된 멤버의 이름을 지정한 이름
   module-name : 가져올 모듈 이름 (파일명)
*/

외부 스크립트 또는 외부 모듈의 export된 함수나 객체를 가져오는데 사용합니다.

 

출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC
https://ko.javascript.info/import-export