#02. [JS] ES6 모듈 사용하기 (import, export)

 

 프로젝트의 규모가 커지다보니 한 파일에 수 천만의 코드라인이 생기기도 했습니다. 이에 JS 코드를 수많은 파일/폴더에 저장하고 효율적으로 불러올 수 있는 시스템이 필요해졌고, 2015년(ES6)에 모듈 시스템이 등장하게 되었습니다.

 

 

모듈(module)

---

모듈 : 프로그램 구성 요소. 관련된 data, function 등을 하나로 묶은 단위

 

모듈형 주택(사진 - 영국 Yorkon)

 모듈형 주택, 모듈형 핸드폰 등 일상생활에서 '모듈'이라는 단어는 많이 들어보셨을 겁니다. 미리 지어진 방, 거실, 화장실을 이어 만든 주택이나 미리 만들어놓은 배터리, OS칩, 카메라 등을 붙여 만든 핸드폰. 짐작하셨듯이 모듈의 특성은 다음과 같습니다.

 

1. 어떠한(웬만하면 하나의) 기능이나 정보를 가지고 있다.
2. 그 자체로 완성된 기능이지만, 완성품의 부속물이다.
3. 수정이 쉽다.
4. 재활용(프로그래밍에서는 감가상각 없는 재사용)이 가능하다.

특히 JavaScript에서의 모듈은 다음과 같은 특성을 가지고 있습니다.

 

1. import, export 구문으로 사용할 수 있습니다.
2. 모듈 간의 같은 변수명을 써도 충돌하지 않는다. (변수명이 모듈 스코프에 한정된다.)

다음은 사진 한 장으로 import와 export를 사용한 JS modules 를 알아보겠습니다. 다음은 모듈을 사용하는 대표적인 예로, 모듈의 다른 사용법은 추후 다시 다뤄보도록 하겠습니다.

 

 

import / export

---

export에는 두 가지 방법이 있습니다.

1. default

 

 

 sum.js는 num1과 num2를 받아 그 합을 return하는 함수모듈입니다. 

default는 모듈 개체가 단 1개일 때 사용합니다. 예제와 같이 하나의 함수, 하나의 리턴값이 존재합니다.

이 때는 심지어 sum이라는 함수 이름도 필요 없습니다.

export default function (num1, num2){	//심지어 sum이 없어도 동일한 결과가 나온다.
    return num1 + num2;
}

import 할 때도 함수 이름을 가져올 필요가 없습니다. 제가 원하는 대로(plus처럼) 이름을 가져와도 작동합니다.

 

결과는 3으로 잘 나왔습니다.

 

 

2. named

 

 

모듈 개체가 2개 이상일 때는 default를 사용할 수 없습니다. default와 달리 변수명, 함수이름도 그대로 가져와야 합니다. (게다가 가져올 때 중괄호{}가 필요하죠.) 만약 이름을 가져오고 싶지 않고 새로 사용하고 싶다면 'as'를 사용하면 됩니다.

 

import { intro, sum as plus } from "./intro.js"		// as를 사용하면 새로 변수명을 쓸 수 있다.

console.log(intro)
console.log(plus(2,3))

 

결과