We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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  

브라우저 호환

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61

16

151

60

54 — 602

No4710.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No61 Yes

60

54 — 602

4710.1 No

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

3. From version 8: this feature is behind the --experimental-modules runtime flag.

참고

문서 태그 및 공헌자

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