Import & Export

μž„ν¬νŠΈ(Import)와 읡슀포트(Export)λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ½”λ“œλ₯Ό λͺ¨λ“ˆν™” ν•  수 μžˆλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€. μ—¬κΈ°μ„œ λͺ¨λ“ˆν™”λž€ μ‰½κ²Œ λ§ν•΄μ„œ λ‹€λ₯Έ νŒŒμΌμ— μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κΈ°λŠ₯을 νŠΉμ • νŒŒμΌμ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

λͺ¨λ“ˆν™”μ˜ ν•„μš”μ„±

기본적으둜 μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 유효 λ²”μœ„λŠ” μ „μ—­μœΌλ‘œ μ‹œμž‘ν•©λ‹ˆλ‹€. λ”°λΌμ„œ μ•„λž˜μ™€ 같이 HTML νŽ˜μ΄μ§€λ₯Ό λ‘œλ”©ν•˜λ©΄ μ›ν•˜λŠ” κ²°κ³Όκ°€ λ‚˜μ˜€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    getTotal(); // 200
  </script>
</body>
// a.js
var total = 100;
function getTotal() {
  return total;
}
// b.js
var total = 200;

λ‹€λ₯Έ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄ 배경을 가지신 뢄듀이라면 파일 λ§ˆλ‹€ λ³€μˆ˜μ˜ 유효 λ²”μœ„κ°€ λ‹€λ₯Ό 것이라고 μƒκ°ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 기본적으둜 λ³€μˆ˜μ˜ 유효 λ²”μœ„κ°€ μ „μ—­μœΌλ‘œ 작히기 λ•Œλ¬Έμ— λ„€μž„μŠ€νŽ˜μ΄μŠ€ λͺ¨λ“ˆν™” νŒ¨ν„΄μ΄λ‚˜ Require.js와 같은 λͺ¨λ“ˆν™” 라이브러리λ₯Ό μ΄μš©ν•˜μ—¬ λͺ¨λ“ˆν™” κΈ°λŠ₯을 κ΅¬ν˜„ν•΄μ™”μŠ΅λ‹ˆλ‹€.

μ΄μ œλŠ” ν”„λ‘œκ·Έλž˜λ° νŒ¨ν„΄μ΄λ‚˜ λ³„λ„μ˜ λͺ¨λ“ˆν™” 라이브러리λ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³ λ„ μžλ°”μŠ€ν¬λ¦½νŠΈ μ–Έμ–΄ μžμ²΄μ—μ„œ λͺ¨λ“ˆν™”λ₯Ό μ§€μ›ν•©λ‹ˆλ‹€.

import & export κΈ°λ³Έ 문법

λͺ¨λ“ˆν™” κΈ°λŠ₯을 μ‚¬μš©ν•˜κΈ° μœ„ν•œ 기본적인 import, export 문법을 λ³΄κ² μŠ΅λ‹ˆλ‹€.

λ¨Όμ € export λ¬Έλ²•μž…λ‹ˆλ‹€.

export λ³€μˆ˜, ν•¨μˆ˜

λ‹€λ₯Έ νŒŒμΌμ—μ„œ κ°€μ Έλ‹€ μ“Έ λ³€μˆ˜λ‚˜ ν•¨μˆ˜μ˜ μ•žμ— export λΌλŠ” ν‚€μ›Œλ“œλ₯Ό λΆ™μž…λ‹ˆλ‹€. 읡슀포트된 νŒŒμΌμ€ μž„ν¬νŠΈλ‘œ λΆˆλŸ¬μ™€ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

import 문법을 λ³΄κ² μŠ΅λ‹ˆλ‹€.

import { 뢈러올 λ³€μˆ˜ λ˜λŠ” ν•¨μˆ˜ 이름 } from '파일 경둜';

읡슀포트된 λ³€μˆ˜λ‚˜ ν•¨μˆ˜λ₯Ό {}에 μ„ μ–Έν•œ λ’€ ν•΄λ‹Ή 파일이 μžˆλŠ” 경둜λ₯Ό μ μ–΄μ€λ‹ˆλ‹€.

import & export 기본 예제

배운 문법을 λ°”νƒ•μœΌλ‘œ κ°„λ‹¨ν•œ 예제λ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

// math.js
export var pi = 3.14;
// app.js
import { pi } from './math.js';

console.log(pi); // 3.14

μœ„ μ½”λ“œλŠ” math.jsλΌλŠ” νŒŒμΌμ—μ„œ piλ₯Ό μ΅μŠ€ν¬νŠΈν•˜κ³  app.js νŒŒμΌμ—μ„œ μž„ν¬νŠΈν•˜μ—¬ μ½˜μ†”μ— 좜λ ₯ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€. λ§Œμ•½ λ³€μˆ˜κ°€ μ•„λ‹ˆλΌ ν•¨μˆ˜λ₯Ό 내보내고 μ‹Άλ‹€λ©΄ μ•„λž˜μ™€ 같이 μ½”λ”©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



Β 
Β 
Β 

// math.js
export var pi = 3.14;
export function sum(a, b) {
  return a + b;
}
// app.js
import { sum } from './math.js';

sum(10, 20); // 30

μœ„ μ½”λ“œλŠ” math.js에 두 숫자의 합을 κ΅¬ν•˜λŠ” sum() ν•¨μˆ˜λ₯Ό 읡슀포트 ν•œ λ’€ app.jsμ—μ„œ μž„ν¬νŠΈν•˜μ—¬ μ‚¬μš©ν•œ μ½”λ“œμž…λ‹ˆλ‹€.

λΈŒλΌμš°μ € 지원 λ²”μœ„

ES6의 기본적인 문법듀이 μ΅œμ‹  λΈŒλΌμš°μ €μ—μ„œ μ§€μ›λ˜λŠ”λ° λ°˜ν•΄ import, exportλŠ” 아직 보쑰 도ꡬ가 μžˆμ–΄μ•Όλ§Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λΈŒλΌμš°μ € 지원 λ²”μœ„λŠ” μ—¬κΈ°λ₯Ό ν™•μΈν•˜μ„Έμš”.

가급적 싀무 μ½”λ“œμ—μ„œ μ‚¬μš©ν•˜μ‹€ λ•ŒλŠ” μ›ΉνŒ©(Webpack)κ³Ό 같은 λͺ¨λ“ˆ λ²ˆλ“€λŸ¬λ₯Ό μ΄μš©ν•˜μ—¬ κ΅¬ν˜„ν•˜λŠ” 것을 μΆ”μ²œλ“œλ¦½λ‹ˆλ‹€.