ES6 모듈화

모듈이란

• 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말함.
• 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출
• 모듈은 파일단위로 분리되어 있고, 명시적으로 모듈을 로드하여 재사용 함.
• 모듈은 개별적으로 존재하다가 애플리케이션의 로드에 의해 애플리케이션의 일원이 됨
• 모듈의 장점
  • 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리해 애플리케이션을 구성할 수 있으며, 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있음

기존 자바스크립트로는 모듈화 구현 불가

• 자바 스크립트는 파일마다 독립적으로 파일 스코프를 갖지 않고, 하나의 전역 객체를 공유함.
• 즉, 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드해도 분리된 자바스크립트는 하나의 자바스크립트 파일내에 있는 것처럼 하나의 전역 객체를 공유함.
• 전역 객체를 공유하므로 전역 변수가 중복되는 문제가 발생할 수 있음

ES6의 모듈 지원

• script 태그에 type="module"를 추가하면 로드된 자바스크립트 파일은 모듈로서 동작함.
• ES6 모듈의 파일 확장자는 모듈임을 명확하게 하기 위해 .mjs를 사용
• <script type="module" src="test.mjs"></script>

ES6 모듈 스코프

[모듈 아님]

//moduleTest.js
var a = 'test';     //전역 변수
console.log(window.a);  //test

//moduleTest2.js
var a = 'test2';    //moduleTest.js에서 선언한 a와 중복 선언됨
console.log(window.a);  //test2

//html
<script src="moduleTest.js"/>
<script src="moduleTest2.js"/>
//결과적으로 서로 다른 js에 있는 a변수는 전역변수로서, 새로운 할당을 하게되면 덮어씌워지게 됨.

[모듈화]

//moduleTest.js
var a = 'test';     //전역 변수
console.log(a);     //test
console.log(window.a);  //undefined

//moduleTest2.js
var a = 'test2';    //moduleTest.js에서 새로운 변수 a를 선언
console.log(a);     //test2
console.log(window.a);  //undefined

//html
<script type="module" src="moduleTest.mjs"/>
<script type="module" src="moduleTest2.mjs"/>
//모듈 내에서 선언한 변수는 모듈 외부에서 참조할 수 없음. 스코프가 다르기 때문임.

export 활용

• 모듈안에 선언한 모든 식별자는 기본적으로 해당 모듈 내부(하나의 파일)에서만 참조 가능
• 만약 모듈안에 선언한 식별자를 다른 모듈들이 참조하게 하고 싶다면 export 키워들 사용
• 변수, 함수, 클래스 모두 export 가능한

//exportTest.js
export var a = 123; //변수

export function abc(){  //함수
    console.log("export 함수");
}

export class Emp {  //클래스
    consturctor(name) {
        this.name = name;
    }
}

[한 곳에서 export 초기화]
//exportTest.js
var a = 123; //변수

function abc(flg){  //함수
    console.log("export 함수" + flg);
}

class Emp {  //클래스
    consturctor(name) {
        this.name = name;
    }
}

export{a, abc, Emp};

import 사용

• 모듈에서 공개한 대상(export)을 사용하려면 import 해야함.

import {a, abc, Emp} from './exportTest.js

console.log(a); //123
console.log(abc("가져와 씀")); //export 함수 가져와 씀
console.log(new Emp("Richard"));    //Emp {name : 'Richard'}

• as를 사용하여 이름을 변경할 수 있음

import {a as alpa, abc as func, Emp as E} from './exportTest.js

• 모듈에서 하나만 export 했을 경우에는 default를 사용할 수 있음.

//defaultTest.js
export default function(a) {
    console.log(a);
}

//main.js
import val from './defaultTest.js';
console.log(val(3));    //3

• default를 사용한 경우 var, let, const는 사용할 수 없음

//defaultTest.js
export default () => {};

• ES6 모듈 기능을 활용하여 default 테스트

//defaultTest.js
export default a => a*a;

//main.js
import mult from './defaulTest.js';
console.log(mult(3));   //9

//html
<script type="module" src="defaultTest.js"/>
<script type="module" src="main.js"/>
//콘솔에 9가 출력