import 문은 외부 모듈이나 다른 스크립트 등으로부터 export 된 기능을 가져오는데 사용됩니다.

이 기능은 현재 브라우저 자체에서 최근 구현되기 시작 했습니다. 이 기능은 TypeScript와 Babel과 같은 트랜스파일러 그리고 RollupWebpackParcel과 같은 번들러 등에서 구현되었습니다.

문법

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
name
가져온 값을 받을 객체 이름.
member, memberN
export 된 모듈에서 멤버의 이름만 가져옵니다.
defaultMember
export 된 모듈의 default 이름을 지정합니다.
alias, aliasN
가져온 프로퍼티가 받을 객체의 이름을 지정합니다.
module-name
가져올 모듈 이름. 파일명 입니다.

설명

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";

멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 shortName 이 들어갑니다.

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다.

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

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

import "my-module.js";

기본값 가져오기

default export 를 통해 내보낸 것을 기본값으로 가져올 수 있습니다. (object, function, class 등). export 와 상반된 import 명령어를 통해 기본값을 가져오는 것이 가능합니다.

기본값으로 바로 가져오는 가장 간단한 버전:

import myModule from "my-module.js";

위와 함께 기본 구문도 같이 사용할 수 있습니다 (namespace 가져오기 또는 이름 지정하여 가져오기). 이러한 경우, 기본값 가져오는 부분을 먼저 선언해야 할 것입니다. 예를 들어:

import myDefault, * as myModule from "my-module.js";
// myModule used as a namespace

또는

import myDefault, {foo, bar} from "my-module.js";
// specific, named imports

예제

AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다.

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

명세

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Imports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Imports' in that specification.
Draft  

브라우저 호환

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Edge Mobile Full support YesFirefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs Full support 8.5.0
Notes Disabled
Full support 8.5.0
Notes Disabled
Notes files must have suffix .mjs, not .js
Disabled From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Full support 63Edge No support No
Notes
No support No
Notes
Notes See development status.
Firefox No support No
Notes
No support No
Notes
Notes See bug 1342012.
IE No support NoOpera Full support 50Safari Full support 11.1WebView Android Full support 63Chrome Android Full support 63Edge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1342012.
Opera Android Full support 50Safari iOS Full support 11.1Samsung Internet Android ? nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

참고

문서 태그 및 공헌자

이 페이지의 공헌자: hwshim, haydnhkim
최종 변경자: hwshim,