모듈 (Module)

모듈이란?

개발하는 애플리케이션의 크기가 커지면 파일을 분리해야 하는 시점이 필요한데, 이때 분리된 파일을 각각 ‘모듈(Module)’ 이라고 부른다.

모듈은 특정 데이터의 집합이라고 할 수 있으며 특정한 목적을 가진 복수의 함수로 구성된다. 즉, 하나의 스크립트 파일은 하나의 모듈이라고 볼 수 있다.

export (내보내기)

export 지시자를 변수나 함수에 붙여 외부 모듈에서 해당 변수나 함수에 접근할 수 있도록 한다.

선언부 앞에 export 붙이기

// 상수 내보내기
export const hi = 'hello!';

// 배열 내보내기
export let fruits = ['apple', 'banana', 'cherry'];

// 함수 내보내기
export function hello(user) {
	console.log(`hello, ${user}!`);
}

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

선언부와 떨어진 곳에 export 붙이기

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

// 두 함수 내보내기
export { sayHi, sayBye };

이름 바꿔서 내보내기 ( export { } as )

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export { sayHi as hi, sayBye as bye };

export default 기본 내보내기

‘해당 모듈에는 개체가 하나만 있다.’ 는 의미로 하나의 모듈에서 한 번만 사용 가능하다. import 로 가져올 때 사용자가 변수를 지정하며, 중괄호 없이 사용할 수 있다.

export default ['apple', 'banana', 'cherry'];

import fruits from './fruits.js';

console.log(fruits);   // (3) ['apple', 'banana', 'cherry']