1. 선언문 export
export const title = 'Module';
2. 선언된 변수나 함수를 코드 블록으로 묶어서 export
const printer = (value) => {
console.log(value);
};
const arrPrinter = (arr) => {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
})
};
export { printer, arrPrinter };
3. as 키워드로 이름을 변경해서 export
const printer = (value) => {
console.log(value);
};
const arrPrinter = (arr) => {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
})
};
export { printer as namedPrinter, arrPrinter };
4. default 키워드로 표현식을 export
const title = 'Module';
export default title;
4-1. default 키워드로 여러 대상을 객체 값으로 모아서 export
const title = 'Module';
const printer = (value) => {
console.log(value);
};
const arrPrinter = (arr) => {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
})
};
export default { title, printer, arrPrinter };
5. import 키워드 이후에 중괄호 사용하기
: 모듈 파일에서 export하는 항목들을 선택적으로 불러오기
import { title, data } from './modules.js';
5-1. as 키워드 사용해서 import
import { title as moduleTitle, data } from './modules.js';
6. 와일드카드 문자 *로 export돈 항목둘을 모두 import
import * as modules from './modules.js';
7. default export된 대상을 import
import { defult as modules } from './modules.js';
7-1. default 된 내용을 축약형으로 import
import modules from './modules.js';
7-2. default로 가져온 여러 내용을 사용
- 여러 개의 기능으로 나누어진 모듈을 import한 다음 다시 export하는 모듈 파일을 만들 수 있다.
- 비슷한 특징을 가진 여러 모듈 파일들을 다시 하나의 모듈파일로 만들 수 있어서 파일 관리에 유용하다.
// (modules.js)
import module1 from './sub-module1.js';
import module2 from './sub-module2.js';
import module3 from './sub-module3.js';
export { module1, module2, module3 };
// index.js
import { module1, module2, module3 } from 'modules.js';
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
[자바스크립트 js] 객체 만들기 / Object-Literal / Factory function / Constructor function (0) | 2021.06.19 |
---|---|
[자바스크립트 js] 객체 지향 프로그래밍이란 (0) | 2021.06.19 |
[자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export (0) | 2021.06.19 |
[자바스크립트 js] 모듈 개념 (0) | 2021.06.16 |
[자바스크립트 js] Map / Set (0) | 2021.06.16 |