ES6 문법 - Export, Import

Export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다. 내보내는 모듈은 "use strict" 의 존재 유무와 상관없이 무조건 엄격 모드입니다. export 문은 HTML 안에 작성한 스크립트에서는 사용할 수 없습니다.

/* 하나씩 내보내기 */
export let name // var, const 도 동일
export let name = 'Harry Kane' // var, const 도 동일
export function setName() {...}
export const setName = () => {...}
export class SetName {...}
​
/* 목록으로 내보내기 */
export { name1, name2, name3, ..., nameN };
​
/* 내보내면서 이름 바꾸기 */
export { Kane as name1, Son as name2, Alli as name3, ..., nameN };
​
/* 비구조화 내보내기 */
export const { name1, name2: bar } = obj;
​
/* 기본 내보내기 */
export default expression;
export default function (...) {...} // also class, function*
export default function name1(...) {...} // also class, function*
export { name1 as default, ... };
​
/* 모듈 조합 */
export * from ...; // 기본 내보내기를 설정하지 않았습니다.
export * as name1 form ...;
export { name1, name2, ..., nameN } from ...;
export { import1 as name1, import2 as name2, ..., nameN } from ...;
export { default } from ...;

설명

내보내기에는 두 종류, 유명(named)과 기본(default) 내보내기가 있습니다. 모듈 하나에서, 유명 내보내기는 여러 개 존재 할 수 있지만 기본 내보내기는 하나만 가능합니다. 각 종류는 위의 구문 중 하나와 대응합니다.

유명 내보내기

/* 먼저 선언한 식별자 내보내기 */
export { myFunction, myVariable };
​
/* 각각의 식별자 내보내기(변수, 상수, 함수, 클래스) */
export let myVariable = Math.sqrt(2);
export function myFunction() {...};

기본 내보내기

/* 먼저 선언한 식별자 내보내기 */
export { myFunction as default };
​
/* 각각의 식별자 내보내기 */
export default function () {...};
export default class {...}

유명 내보내기는 여러 값을 내보낼 때 유용합니다. 가져갈 때는 내보낸 이름과 동일한 이름을 사용해야 합니다. 반면 기본 내보내기는 어떤 이름으로도 가져올 수 있습니다.

// test.js
let k;
export default k = 12;
​
// index.js
import m from './test'; // k 가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m 을 사용해도 문제 없음
console.log(m); // 12

식별자 충돌을 피하기 위해 유명 내보내기 중 이름을 바꿔줄 수도 있습니다.

export { myFunction as function1, myVariable as variable1 };

부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다.

export foo from 'bar.js';
​
위 구문은 아래와 동일합니다.
​
import foo from 'bar.js';
export foo;

Import

정적 import 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.
가져오는 모듈은 'use strict' 의 존재 유무와 상관없이 무조건 엄격모드입니다. HTML 안에서 작성한 스크립트에서는 import 를 사용할 수 없습니다.
함수형 구문을 가진 동적 import() 도 있으며, type="module" 을 필요로 하지 않습니다.
script 태그의 nomodule 속성을 사용해 하위호완성을 유지할 수 있습니다.
동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올 때 유용합니다. 반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 트리셰이킹(en-US)을 적용하기 쉽습니다.

import defaultExport from 'module-name';
import * as name from 'module-name';
import { export1 } from 'module-name';
import { export1 as alias1 } from 'module-name';
import { export1, export2 } from 'module-name';
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
​
var promise = import("module-name");

용어

defaultExport:
모듈에서 가져온 기본 내보내기를 가리킬 이름
​
module-name:
가져올 대상 모듈. 보통, 모듈을 담은 .js 파일로의 절대 또는 상대 경로입니다. 번들러에 따라 확장자를 허용하거나 필요로 할 수도 있으므로 작업 환경을 확인하세요. 따옴표와 쌍다옴표 문자열만 사용 가능합니다.
​
name:
가져온 대상에 접근할 때 일종의 이름공간으로 사용할, 모듈 객체의 이름
​
exportN:
내보낸 대상 중 가져올 것의 이름
​
aliasN:
가져온 유명 내보내기를 가리킬 이름.

설명

name 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. member 파라미터는 각각의 멤버를 지정하지만, name 파라미터는 모두를 가져옵니다. 모듈에서 name 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.

모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 myModule 로 바인딩 되어 들어갑니다.

import * as myModule from 'my-module.js';

모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 myMember 가 들어갑니다.

import { myMember } from 'my-module.js';

모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 foo 와 bar 가 들어갑니다.

import { foo, bar } from 'my-module.js';

멤버를 가져올 때 좀 더 편리한 별명을 지정하며 가져옵니다.

import { reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short } from 'my-module.js';

어떠한 바인딩 없이 모듈 전체의 사이트 이펙트만 가져옵니다.

import 'my-module.js';
import 'my-module.css'