TIL - ES module , export와 import

1. 모듈

 개발을 하다보면 애플리케이션의 크기가 커지고 코드도 많이 길어진다. 그리고 여러군데에서 사용되는 코드들도 있을 것이다. 이때 코드를 분리해서 용도별로 나누고 분리해야하는 때가 온다. 그 때 모듈화를 통해서 특정한 기능이나 변수를 가지고 있는 파일로 분리를 한다. 어떻게 생각하면 건물을 지을 때 한장의 벽돌과 같다. 

---

2. ES module

- ES6에서 도입이 된 모듈 시스템이다.

- export와 import를 사용해 분리된 자바스크립트 파일(모듈)을 내보내고, 가져올 수 있다.

---

3. export / import

 1. Named Export

  많은 함수나, 변수를 import 또는 export를 하고 싶을 때 사용한다. 파일 또는 모듈이 원하는 만큼 name export를 가질 수 있다.

// math.js
export const plus = (x, y) => x + y;
export const minus = (x, y) => x - y;
export const square = (x) => x * x;

// main.js
import { minus, square } from "./math"

import { plus as add } from "./math"

 math에 작성한 함수들을 다른 파일에 import할 때는 syntax import를 사용한다. import 다음에 중괄호에는 export할 때 작성된 이름과 반드시 똑같아야 하고, ""안에는 파일이름(모듈을 어디서 가져오는지)이 있어야 한다. 만약에 plus가 아닌 add로 이름을 바꾸고 싶다면 as를 사용한다.

 

 2. Default Export

각 파일에는 단 한개의 default export만 존재할 수 있다. 덕분에 import하기가 더 간결해 진다. 한개의 파일에서 모든 것을 export 하고 모든 것을 import하는 방법이 있다.

// math.js
export const plus = (x, y) => x + y;
export const minus = (x, y) => x - y;
export const square = (x) => x * x;
export default = { plus, minus, square };

//main.js
import math from "./math";
math.plus(2, 3);

import mathFunc from "./math";
mathFunc.plus(3, 5);

 한 개의 객체를 default로 export를 한다. Named와는 다르게 import 할 때 중괄호를 쓸 필요가 없다. 그리고 원하는 이름으로 import할 수 있다.

//db.js
const connectToDB = () => {/*code...*/}
export default connectToDB;

//main.js
import connect from "./db";

 1번과 2번이 혼재되어 있는 경우도 있다.

// db.js
const connectToDB = () => {/*code...*/};
export const getUrl = () => {/*code...*/};
export default connectToDB;

import connect, { getUrl } from "./db";

3. import * from "../"

 default export가 없는 파일에서 모든 export된 내용을 import하고 싶을 때 사용이 가능하다.

// math.js
export const plus = (x, y) => x + y;
export const minus = (x, y) => x - y;
export const square = (x) => x * x;

// main.js
import * as mathFunc from "./math"
mathFunc.plus(2, 3)

import * as myMath from "./math" 이 syntax를 사용해서 math 모듈안에 있는 모든 것을 import 해서 myMath라는 객체에 넣어준다. 

4. Dynamic import

 어떻게 하면 import를 사용해서 로딩을 빠르게 할 수 있을까를 생각하게 된다. 보통의 import 방식은 파일의 위에서부터 몽땅 모든걸 import해야 한다. 이는 로딩속도를 늦추는 요인이 될 수 있다. 왜냐면 웹사이트의 모든 코드를 다운로드를 해야하기 떄문이다. 유저가 사용하던 안하던....하지만 dynamic import를 사용하면 실제로 유저가 사용할 모듈만 import할 수 있다.  

function doMath() {
  import("./math");
  .then(math => math.plus(3, 4));
}
btn.addEventListener("click", doMath)

// async await
function doMath() {
  const math = await import("./math");
  math.plus(3, 4);
}
btn.addEventListener("click", doMath)

유저가 버튼을 클릭하면 math모듈을 import하고 사용한다. 요청이 있을 때마다 모듈을 불러오고 준비가 되면 해당 함수에 접근이 가능해진다.

 

공부... 공부...