MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

import

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

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

Note: This feature is not implemented in any browsers natively at this time. It is implemented in many transpilers, such as the Traceur Compiler and ES6 Module Transpiler.

문법

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.

브라우저 호환

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support [1] No support [2] No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support No support No support No support

[1] Partial support is behind a command line flag: --harmony-modules. See this V8 bug.

[2] See this Firefox bug.

참고

문서 태그 및 공헌자

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