JS 모듈이란?
자바스크립트의 중요한 새 기능들을 통칭하는 것으로 ES 모듈, ECMAScript 모듈이라고도 한다. 모듈은 하나 또는 그 이상의 Routine (함수, 메소드 등)으로 구성된다.
ES6 Modules (ESM)
ES6 이상부터 브라우저 환경에서 사용이 가능하며, import와 export를 사용한다. import와 export 모두 "as"를 사용하여 이름을 바꿔 불러오거나 내보낼 수 있다.
import
다른 파일에서 default export 또는 named export 한 모듈을 불러온다.
import name from "module-name"; // default export 가져오기
import {default as x} from "module-name"; // default export 가져오기
import * as name from "module-name"; // 한 번에 다 가져오기
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
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, alias: 객체의 이름 지정
// module-name: 가져올 모듈 이름, 파일명
export
자바스크립트 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. 내보낸 값은 다른 파일에서 import 했을 때 사용 가능하다. named export와 defalut export 등이 있다.
1. named export
한 모듈 내에서 여러 개가 선언될 수 있으며, 선언된 변수명 그대로 export 한다.
export function1; // 함수 내보내기
export class1; // 클래스 내보내기
export variable1; // 변수 내보내기
export function2;
export {function3 as f3, function4 as f4};
2. default export
default export는 파일당 하나만 존재할 수 있다. 그래서 내보낼 개체에 이름이 없어도 괜찮다.
export function1;
export function2;
default export function3;
위와 같이 named export와 default export를 같은 모듈에서 동시에 사용해도 문제는 없다. 하지만 실무에서는 이렇게 섞어 쓰는 사례가 흔치 않다. 한 파일엔 named export나 default export 둘 중 하나만 사용한다.
3. export ... from ...
import와 export를 한 번에 처리하는 방식으로, 가져온 개체를 즉시 '다시 내보내기(re-export)' 할 수 있다. 패키지의 다른 모듈들을 한 곳에 모아 일관된 형태로 내보내거나 관리하고자 할 때 사용한다.
export * from "module" // 전체 다시 내보내기 - default export는 다시 내보내 지지 않음
export {function1} from './app.js'; // function1을 다시 내보내기 함
export {default as User} from './user.js'; // default export를 다시 내보내기 함
참고할 자료
https://ko.javascript.info/import-export
모듈 내보내고 가져오기
ko.javascript.info
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
VCS - 버전 관리(Version Control Systems)를 쓰는 이유 (0) | 2022.01.07 |
---|---|
JavaScript - 호이스팅, 이벤트 버블링, 스코프, 프로토타입, Shadow Dom, strict mode (0) | 2022.01.06 |
JavaScript - Fetch API / Ajax (XHR) (0) | 2022.01.03 |
JavaScript - DOM 조작 방법 (0) | 2021.12.31 |
JavaScript - 구문과 기본 문법 (0) | 2021.12.29 |