[JavaScript] ES Modules에서 export / import 기본 개념

ES Modules란?

• javascript의 기본 콘셉트
• JS의 import / export 시스템
• 모듈 덕분에 큰 규모의 자바스크립트 파일을 세분화해 정리하고 각 파일 간 접근을 가능케 한다.

import { Module } from "./module"; // named export -> import
import Module from "./module"; // default export -> import
import * as Module from "./module";

위 세 코드의 차이점은 무엇일까?

Named Export -> import

• 많은 파일에서 import 할 때 사용
• 많은 파일 혹은 모듈이 원하는 만큼 많은 수의 named exports를 가질 수 있다.

// math.js
export const plus = (a, b) => a+b;
export const minus = (a, b) => a-b;
export const divide = (a, b) => a/b;
// 이 함수들을 다른 파일로 import 하려면,
import {plus, minus, divide} from "./math"; // *main.js
// 반드시 syntax import를 사용해야 한다.
// syntax import: 중괄호 안에는 이전 module의 함수 혹은 변수 이름, 그리고 ""안에 파일의 이름이 필요하다.
// {}에는 반드시 export된 이름과 import된 이름이 같아야 한다. 만일 변경해야 한다면, as 사용하자. ex) {plus as add}

Default Export -> import

• 한 파일에서만 export 하고 싶을 때 사용하는 방식

// math.js
export const plus = (a, b) => a+b;
export const minus = (a, b) => a-b;
export const divide = (a, b) => a/b;
// 이 모듈에서 각 함수를 하나하나 import 하지 말고,
export default {plus, minus, divide};
// 모든 함수를 가진 한 개의 객체를 default로 export 하여,
import math from "./math"; // *main.js
// {} 없이 해당 모듈을 그대로 import 할 수 있다.
import helloworld from "./math";
//이런식으로 원하는 이름으로 변경해도 된다.
helloworld.plus(2, 2) // 4
// 이런 식으로 사용 가능

혼용

// math.js
const plus = (a, b) => a+b;
export const minus = (a, b) => a-b;
export default plus;
// 이렇게 한 파일에 named / default가 섞여있다면,
import plus, {minus} from "./math"; // * main.js
// 이렇게 한 줄로 다른 파일에 import 할 수 있다.

star export -> import

• default export가 없을 때 한 모듈에서 모든 걸 import 해야할 때 사용하는 방식

// math.js
const plus = (a, b) => a+b;
export const minus = (a, b) => a-b;
export const divide = (a, b) => a/b;
// 한 파일에서 모든 변수를 import하려면,
import * as myMath from "./math"; // *main.js
// 이렇게 한번에 다른 파일에 import 할 수 있다. 변수 이름은 자유
myMath.plus(2,2); // 4

결론, 상황에 맞는 방식으로 import하자! 공부하자!