[JavaScript] 모듈 사용하는 방법 (ft. 내보내기(export)/가져오기(import))

ES6에서 새롭게 지원하는 컴포넌트 정의를 위한 모듈 형태를 사용하기 위해 모듈을 내보내고(export) 가져오는(import) 방법에 대해 알아보자.

 

우선 모듈을 사용하기 위해서는 script 태그에 type="module" 속성을 추가해 줘야한다.

그렇게 되면 해당 자바스크립트 하일은 모듈로서 동작한다.

<script type="module" src="common.js"></script>
<script type="module" src="mine.js"></script>

 

이 상태로 이제 export 와 import 방법에 대해 예제로 하나하나 알아가보자.

---

1. export (내보내기)

1-1. 기본 사용법 (named exports)

// common.js

// 1) 하나씩 내보내기
export function plus (a, b) {
    return a + b;
}

// 2) 목록으로 내보내기
const minus = (a, b) => a - b;
export {minus};

const multiply = (a, b) => a * b;
const divide = (a, b) => a / b ;
export {multiply, divide};

// 내보내지 않음.
const mod = (a, b) => a % b;

내보내기의 두 종류 중 하나인 named exports에 대한 예제인데, 이 방법은 여러개가 존재할 수 있어 위 예제처럼 반복적으로 export 사용이 가능하다.

 

function 옆에 직접적으로 export를 명시하여 하나씩 내보내는 방법과,

이름(named)를 기반으로 {name1, name2, ..., nameN} 방식의 목록으로 내보내는 방법이 존재한다.

 

물론 마지막에 명시되어있는 mod 함수는 내보내지 않았기 때문에 import를 사용해도 사용이 불가능하다.

보통 js 자체내에서 사용하는 함수의 경우에는 굳이 내보낼 필요가 없기 때문에 export를 해주지 않는다.

 

1-2. 단일 객체 내보내기 (default export)

const multiply = (a, b) => a * b;
const divide = (a, b) => a / b ;

export default {
    multiply, 
    divide,
};

여기서 사용되는 export default 키워드는

하나의 모듈에서 하나의 객체만 내보내기 때문에 이를 Default Export라고 말한다.

 

1-1 예제 처럼 여러번 사용할 수 없고 위 예제처럼 단 하나만 사용가능하다는 의미이다.

 

사용방법은 1-1 비슷하게 진행되며 default만 명시해 주면되는데, default의 의미 그대로 해당 모듈을 사용하는데 있어서 필수적이고 중요한 것들을 대상으로 이룬다고 생각하면 된다.

---

2. import (가져오기)

2-1. named exports 대상 가져오기

// 1) 직접적으로 명시해서 가져오기
import {plus, minus} from "./common.js"

console.log(plus(1,2)) // 3;
console.log(minus(4,2)) // 2;

// 2) alias를 이용해 export 대상 전부 가져오기
import * as common from "./common.js"

console.log(common.plus(1,2)) // 3;
console.log(common.minus(4,2)) // 2;

1-1 예제를 보면 plus, minus 함수를 export 하였는데, 이를 각각 명시해서 가져와 사용이 가능하다.

 

하지만 한두개라면 상관없는데, 모듈안에 다양한 export가 존재한다면 두번째 처럼 alias를 이용해 전부 가져오는것도 한 방법이다. (이렇게 되면 필요하지 않은 함수도 전부 가져오기때문에 잘 생각하고 사용해야한다.)

 

2-2. default export 기본값 가져오기

import commonDefault from "./common.js"

console.log(commonDefault.multiply(1,3)) // 3;
console.log(commonDefault.divide(4,2)) // 2;

위 방식으로 default로 선언된 export를 전부 import 하였다.

import 하는 방식만 달라질 뿐이지 사용방식은 동일하다.

 

하지만 이 예제를 통해서는 default export만 불러올 수 있고 역시 named export는 불러올 수 없는데,

다음 예제를 통해 동시에 불러오는 방법에 대해 배워보자.

 

2-3. 모듈에서 export 대상들 전부 가져오기 (named, default)

// 1) default 와 나머지 가져오기
import commonDefault, * as common from "./common.js"

console.log(common.plus(1, 2)) // 3

// 2) default 와 나머지 각각 명시해서 가져오기
import commonDefault, {plus, minus} from "./common.js"

console.log(plus(1, 2)) // 3

// 3) * 을 사용해 전부 가져오기
import * as common from "./common.js";

console.log(common.default.multiply(1,2)); //default를 사용하여 접근
console.log(common.plus(1,2));

 

이런식으로 동시에 가져올 수 있는데, 이렇게 사용하기 위해서는 꼭 default가 앞에 명시되어야한다.

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/export

export - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import

import - JavaScript | MDN