[모듈] import, export 키워드, 모듈

변수, 함수, 클래스 내보내기

// 배열 내보내기
export let foods = ["pizza", "hamburger", "chicken"];

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

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

// 함수 내보내기
const App = () => console.log("hello");
export default App;

// 모듈 내보내기
export { name1, name2 as yeji, ..., nameN} 	// does not set the default export

 

함수 가져오기

import {sayHi, sayBye} from "./say.js";



// say.js
const sayHi = () => console.log("hello");
const sayBye = () => console.log("bye");

const etcHi = () => console.log("bye");
const etcBye = () => console.log("bye");


export default {sayHi, sayBye};

원하는 함수만 import 선언해주면 빌드툴은 선언되지않은 함수는 최종 번들링 결과물에 포함하지 않습니다.

이 과정에서 불필요한 코드가 제거되기 때문에 빌드 결과물의 크기가 작아집니다. -> tree-shaking

 

모듈 export default

 

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

 

1. 복수의 함수가 있는 라이브러리 형태의 모듈

2. 개체 하나만 선언되어있는 모듈

 

대체로 두번째 방식으로 모듈을 만드는걸 선호 합니다.

 

// user.js
export default class User {
	constructor(name) {
    	this.name = name;
    }
}

// main.js
import User from "./user.js"; // default 한 모듈을 가져오려면 중괄호가 필요 x

new User("john");

export default를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타낼 수 있습니다.

최대 하나의 default export가 있으므로 내보낼 개체에 이름이 없어도  해당 모듈을 사용할 수 있습니다.

 

사용예)

export default class {	//클래스 이름이 없음
	constructor() {...}
}

export default () => console.log("say hello"); // 함수 이름이없음

export default ["jan", "yeji", "yunrap"]  // 이름없이 배열형태의 값내보냄