# 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 (opens new window)์™€ ๊ฐ™์€ ๋ชจ๋“ˆํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ชจ๋“ˆํ™” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์™”์Šต๋‹ˆ๋‹ค.

์ด์ œ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํŒจํ„ด์ด๋‚˜ ๋ณ„๋„์˜ ๋ชจ๋“ˆํ™” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ ๋„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด ์ž์ฒด์—์„œ ๋ชจ๋“ˆํ™”๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

# 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๋Š” ์•„์ง ๋ณด์กฐ ๋„๊ตฌ๊ฐ€ ์žˆ์–ด์•ผ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ์ง€์› ๋ฒ”์œ„๋Š” ์—ฌ๊ธฐ (opens new window)๋ฅผ ํ™•์ธํ•˜์„ธ์š”.

๊ฐ€๊ธ‰์  ์‹ค๋ฌด ์ฝ”๋“œ์—์„œ ์‚ฌ์šฉํ•˜์‹ค ๋•Œ๋Š” ์›นํŒฉ(Webpack) (opens new window)๊ณผ ๊ฐ™์€ ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.