ES6 - import, export 사용하기

1. Javascript 모듈하는 무엇일까요?

Javascript는 기본적으로 모듈화 기능이 없었습니다. 여러 .js 파일로 쪼개서 모든 파일을 일일이 <script> 태그를 이용하여 불러오는 방법이 있긴 했지만, 이 방법에는 다음과 같은 문제가 존재했습니다.

• 별도로 만든 오브젝트가 모두 글로벌 변수에 저장된다.
• 변수의 이름이 겹치게 되면 에러가 발생한다.
• 다른 사람의 .js 파일을 사용할 때 이러한 사항을 전부 확인해야 된다.

이러한 불편함을 극복하기 위해 모듈화가 등장했습니다. 모듈화는 Javascript 코드를 모듈(개별적 요소로서 재사용 가능한 코드 조각)로 정리하는 방법으로서 코딩 작업 및 유지보수를 더 손쉽게 할 수 있도록 도와줍니다.

 

Javascript의 모듈화 지원은 ES6부터 지원되었고 그 이전에는 모듈화 기능을 해주는 CommonJS나 AMD 같은 Syntax가 별도로 개발되었습니다. 이러한 Syntax를 지원하는 브라우저 및 서버들이 늘어남으로서 Javascript를 모듈화 하는것이 가능해졌습니다. ES6부터는 Javascript에서 import, export를 통한 모듈화를 지원하기 시작했습니다.

 

2. import, export 사용방법

1) import

import를 통해 상대 경로에 위치한 모듈 파일을 가져올 수 있습니다.

import * as myModule from 'test01.js';  //test01.js에서 선언한 모듈 전체를 myModule로 바인딩하여 가져온다.
 
import {myMember} from 'test02.js' //test02.js에서 선언한 myMember 모듈을 가져온다.

import {firstName, lastName} from 'test03.js' //test03.js에서 선언한 firstName, lastName 모듈을 가져온다.

import myModule from 'test04' //test04에서 default export로 내보낸 기본값을 가져온다.

 

2) export

export를 통해 함수, 변수 클래스 등의 코드를 외부로 내보낼 수 있습니다.

// 하나씩 내보내기
export let name1, name2, …, nameN; // var, const도 동일
export let name1 = …, name2 = …, …, nameN; // var, const도 동일
export function functionName(){...}
export class ClassName {...}

// 목록으로 내보내기
export { name1, name2, …, nameN };

// 내보내면서 이름 바꾸기
export { variable1 as name1, variable2 as name2, …, nameN };

// 비구조화로 내보내기
export const { name1, name2: bar } = o;

// 기본 내보내기(기본은 하나만 존재한다)
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 모듈 조합
export * from …; // does not set the default export
export * as name1 from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

 

 

출처

import - JavaScript | MDN