[UI Component] Design Patterns - Module

Module

- 코드를 재사용 가능하면서 작게 나눔

- 모듈 스코프 내에 변수를 선언하고 명시적으로 외부에 export 하지 않으면 해당 변수 접근 불가

   -> 전역 스코프의 변수들과 이름이 충돌하는 문제 줄일 수 있음

- named export

- 명시적으로 export한 값들만 외부에 노출됨

- import할 때 as 키워드를 통해 import한 값의 이름 변경 가능

- export 키워드를 사용한 선언들 중에 하나를 default export 할 수 있음

  -> import할 때 중괄호 없이 바로 사용 가능, 자유롭게 이름 변경 가능

- *를 사용하여 모든 것들을 한번에 import하여 객체 형태로 사용 가능

- Dynamic import: 특정 조건에서만 특정 모듈 로드할 수 있음

  - 모듈을 동적으로 로딩하여 페이지 로딩 타임을 줄일 수 있음

- 모듈 패턴을 사용하면 코드의 일부분을 캡슐화 할 수 있음

   -> 의도치 않은 전역 변수 할당 예방하여 여러 의존 모듈 또는 네임스페이스를 사용할 때 안전함

- ES2015 모듈 사용 위해 바벨과 같은 트랜스파일러 필요함

 

- 예시

// math.js
export default function add(x, y) {
  return x + y
}

export function multiply(x) {
  return x * 2
}

export function subtract(x, y) {
  return x - y
}

export function square(x) {
  return x * x
}

 

// index.js
import add, { multiply, subtract, square } from './math.js'

add(7, 8)
multiply(8, 9)
subtract(10, 3)
square(3)

 

- 활용

---

[UI Component] Design Patterns - Module