(React) 기초 - ES6 모듈

자바스크립트 모듈은 다른 자바스크립트 파일에서 이름 충돌이 없이 쉽게 불러서 활용할 수 있는 재사용 가능한 코드 조각을 말한다. 자바스크립트는 모듈을 한 모듈당 하나씩 별도의 파일로 저장한다. 모듈을 만들고 외부에 익스포트 하는 방법에는 한 모듈에서 여러 자바스크립트 객체를 외부에 노출시키는 방식과 한 모듈에 하나의 자바스크립트 객체를 노출시키는 방식이 있다. 

 

text-helper.js 파일에 있는 다음 모듈은 두 함수를 외부에 노출시킨다.

export const print(message) => log(message, new Date());
export const log(message, timestamp) =>
	console.log('$(timestamp.toString()): ${message}'};

 

export를 사용해 다른 모듈에서 활용하도록 이름(함수, 객체, 변수, 상수 등이 될 수 있다)을 외부에 익스포트할 수 있다. 이 예제에서는 print 함수와 log함수를 외부에 익스포트하는 중이다. text-helper.js에 정의된 다른 선언들은 이 모듈 내부에만 한정된다.(즉, 로컬 선언이다.)

 

경우에 따라 모듈에서 단 하나의 이름만을 외부에 익스포트하고 싶을 때가 있다. 그런 경우 export default를 사용할 수 있다. 다음 mt-freel.js 파일은 구체적인 탐험 계획을 외부에 노출시킨다.

const freel = new Expedition("프릴 산", 2, ["식수", "간식"]);

export default freel;

 

export default는 오직 하나의 이름만을 노출하는 모듈에서 export 대신 사용할 수 있다. 다시 말하지만 export나 export default에서는 기본 타입, 객체, 배열, 함수 등 모든 타입의 자바스크립트 이름을 외부에 노출시킬 수 있다.

 

import 명령을 사용해 다른 자바스크립트 파일에 있는 모듈을 불러와 사용할 수 있다. 외부에 여러 이름을 노출한 모듈을 임포트할 때는 객체 구조 분해를 활용할 수 있다. export default를 사용해 한 이름만을 노출한 경우에응 노출된 대상을 한 이름으로 부를 수 있다. 

import {print, log} from './text-helpers';
import freel from './mt-freel';

print('메시지를 print');
log('메시지를 log');

freel.print();

 

모듈에서 가져온 대상에 다른 이름을 부여할 수도 있다. 

import { print as p, log as l } from './text-helpers';

p('메시지를 print');
l('메시지를 log');

 

import *를 사용하면 다른 모듈에서 가져온 모든 이름을 사용자가 정한 로컬 이름 공간 안에 가둘 수 있다.

import * as fns from './text-helpers;

 

아직은 모든 브라우저나 노드가 import와 export 구문을 완전히 지원하지는 못한다. 하지만 다른 최신 자바스크립트 문법과 마찬가지로 바벨은 import와 export를 지원한다. 이 말은 소스 코드에서 이런 문장을 사용하면 바벨이 어떤 파일에서 모듈을 찾아서 포함시켜야 할지 알 수 있다는 뜻이다.