[JS] 모듈 프로그래밍: export, import

모듈(module)

: 분리된 개별 코드 파일

 

 

 

모듈 프로그래밍

: 코드의 재사용성과 유지보수성을 높이기 위해 코드를 여러 모듈로 나누는 기법

 

 

 

모듈의 핵심 기능

• 엄격 모드(use strict)로 실행됨 
  - <script type="module"> 이어야 export, import 가능✨
• 모듈 만의 스코프(scope)가 있음
  - 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다❌
• 한 번만 평가됨 
  - 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다. 
• 지연 실행된다.
• 인라인 모듈 스크립트도 비동기 처리할 수 있다.

 

---

export (내보내기)

: 변수, 함수, 클래스를 모듈 밖으로 내보낼 수 있다.

 

 

named export (이름 내보내기)

• 한 파일 내에서 여러 개 내보내기(export) 가능
• 여러 항목을 보내기 편함 (유틸리티 함수 등)
• import 할 경우
  - as 키워드를 사용해서 다른 이름(별칭)을 지정할 수 있음⭕
  -  {중괄호} 사용⭕ 

// export
export const pi = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}


// import 
import { pi, add, subtract } from './math.js';

console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2


// import alias
import { add as addition, subtract as subtraction } from './math.js';

console.log(addition(2, 3)); // 5
console.log(subtraction(5, 3)); // 2

 

 

 

default export (기본 내보내기)

export default 

• 한 파일 내에서 1개만 내보내기(export) 가능
• 모듈의 주요 항목을 내보낼 때 사용 (변수, 클래스, 함수 등)
• import 할 경우
  - as 키워드 없이 이름 변경 가능⭕
  - 중괄호 사용 ❌
  (ex. import 함수명 from '경로')

// export
export default function greet(name) {
  return `Hello, ${name}!`;
}


// import
import greet from './utils.js';

console.log(greet('World')); // Hello, World!


// import alias
import welcome from './utils.js';

console.log(welcome('World')); // Hello, World!

 

 

---

import (가져오기)

: 다른 모듈에서 내보낸 변수, 함수, 클래스를 가져올 수 있다.

 

 

named import (이름 내보내기)

import { 이름 } from '경로';

• 특정 이름으로 내보낸 요소를 가져올 때 사용
• {중괄호} 사용⭕ 
• import All (모든 내용 한 번에 가져오기): import * [as]

// export
export const pi = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}


// import
import { pi, add, subtract } from './math.js';

console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
console.log(subtract(5, 3)); // 2


// import alias
import { add as addition, subtract as subtraction } from './math.js';

console.log(addition(2, 3)); // 5
console.log(subtraction(5, 3)); // 2


// import all
import * as math from './math.js';

console.log(math.pi); // 3.14159
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

 

 

 

default import (기본 내보내기)

import 이름 from '경로';

• 모듈에서 하나의 기본(default) 요소를 가져올 때 사용
• 중괄호 사용 ❌

// export
export default function greet(name) {
  return `Hello, ${name}!`;
}


// import
import greet from './utils.js';

console.log(greet('World')); // Hello, World!

 

---

 

모듈 소개