1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: import
slug: Web/JavaScript/Reference/Statements/import
tags:
- ECMAScript6
- Modules
- import
translation_of: Web/JavaScript/Reference/Statements/import
---
<div>{{jsSidebar("Statements")}}</div>
<p>정적 <strong><code>import</code></strong> 문은 다른 모듈에서 내보낸 바인딩을 가져올 때 사용합니다.</p>
<p>가져오는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. HTML 안에 작성한 스크립트에서는 <code>import</code>를 사용할 수 없습니다.</p>
<p>함수형 구문을 가진 동적 <strong><code>import()</code></strong>도 있으며, <code>type="module"</code>을 필요로 하지 않습니다.</p>
<p>{{htmlelement("script")}} 태그의 <code>nomodule</code> 속성을 사용해 하위호환성을 유지할 수 있습니다.</p>
<p>동적 가져오기는 모듈을 조건적으로 가져오고 싶거나, 필요할 때에만 가져올 때 유용합니다. 반면 초기 의존성을 불러올 때엔 정적 가져오기가 더 좋고, 정적 코드 분석 도구와 {{glossary("Tree shaking", "트리 셰이킹")}}을 적용하기 쉽습니다.</p>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">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");</pre>
<dl>
<dt><code>defaultExport</code></dt>
<dd>모듈에서 가져온 기본 내보내기를 가리킬 이름.</dd>
<dt><code>module-name</code></dt>
<dd>가져올 대상 모듈. 보통, 모듈을 담은 <code>.js</code> 파일로의 절대 또는 상대 경로입니다. 번들러에 따라 확장자를 허용하거나, 필요로 할 수도 있으므로 작업 환경을 확인하세요. 따옴표와 쌍따옴표 문자열만 사용 가능합니다.</dd>
<dt><code>name</code></dt>
<dd>가져온 대상에 접근할 때 일종의 이름공간으로 사용할, 모듈 객체의 이름.</dd>
<dt><code>exportN</code></dt>
<dd>내보낸 대상 중 가져올 것의 이름.</dd>
<dt><code>aliasN</code></dt>
<dd>가져온 유명 내보내기를 가리킬 이름.</dd>
</dl>
<h2 id="설명">설명</h2>
<p><code>name</code> 파라미터는 export 되는 멤버를 받을 오브젝트의 이름입니다. <code>member</code> 파라미터는 각각의 멤버를 지정하지만, <code>name</code> 파라미터는 모두를 가져옵니다. 모듈에서 <font face="Courier New, Andale Mono, monospace">name</font> 은 멤버 대신 하나의 default 파라미터를 통해 export 하는 경우에도 동작할 수 있습니다. 다음의 명확한 예제 문법을 살펴봅시다.</p>
<p>모듈 전체를 가져옵니다. export 한 모든 것들을 현재 범위(스크립트 파일 하나로 구분되는 모듈 범위) 내에 <code>myModule</code> 로 바인딩되어 들어갑니다.</p>
<pre class="brush: js">import * as <em>myModule</em> from "my-module.js";
</pre>
<p>모듈에서 하나의 멤버만 가져옵니다. 현재 범위 내에 <code>myMember</code> 이 들어갑니다.</p>
<pre class="brush: js">import {myMember} from "my-module.js";</pre>
<p>모듈에서 여러 멤버들을 가져옵니다. 현재 범위 내에 <code>foo</code> 와 <code>bar</code> 이 들어갑니다.</p>
<pre class="brush: js">import {foo, bar} from "my-module.js";</pre>
<p>멤버를 가져올 때 좀 더 편리한 별명을 지정해줍니다. 현재 범위 내에 <code>shortName</code> 이 들어갑니다.</p>
<pre class="brush: js">import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";</pre>
<p>모듈에서 여러 멤버들을 편리한 별명을 지정하며 가져옵니다.</p>
<pre>import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module.js";</pre>
<p>어떠한 바인딩 없이 모듈 전체의 사이드 이펙트만 가져옵니다.</p>
<pre class="brush: js">import "my-module.js";</pre>
<h3 id="기본값_가져오기">기본값 가져오기</h3>
<p>default export 를 통해 내보낸 것을 기본값으로 가져올 수 있습니다. (object, function, class 등). export 와 상반된 <code>import</code> 명령어를 통해 기본값을 가져오는 것이 가능합니다.</p>
<p>기본값으로 바로 가져오는 가장 간단한 버전:</p>
<pre class="brush: js">import myModule from "my-module.js";</pre>
<p>위와 함께 기본 구문도 같이 사용할 수 있습니다 (namespace 가져오기 또는 이름 지정하여 가져오기). 이러한 경우, 기본값 가져오는 부분을 먼저 선언해야 할 것입니다. 예를 들어:</p>
<pre class="brush: js">import myDefault, * as myModule from "my-module.js";
// myModule used as a namespace</pre>
<p>또는</p>
<pre class="brush: js">import myDefault, {foo, bar} from "my-module.js";
// specific, named imports
</pre>
<h2 id="예제">예제</h2>
<p>AJAX JSON 리퀘스트 처리를 돕는 보조 파일을 가져옵니다.</p>
<pre class="brush: js; highlight: [14]">// --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);
});</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("javascript.statements.import")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("Statements/export", "export")}}</li>
<li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
