[JavaScript] import / export 를 이용한 모듈 개발

 

일반적으로 자바스크립트 코드가 길어지면 다른 파일로 쪼개어 자바스크립트 코드만 따로 작성하여 불러옵니다.

ES6 부터 import / export를 사용하면 원하는 변수와 함수, class만 따로 다른 파일로 보낼 수 있습니다.

 

하지만, import해온 변수와 함수는 사용이 가능하지만 수정은 불가능합니다.

 

<script src="따로 저장된 자바스크립트 파일 위치"></script>

 

지금까지의 웹 코딩에서는 위와 같은 방식으로 별도의 파일에서 자바스크립트 코드를 작성하고 원하는 곳에서 위 코드를 작성하여 자바스크립트를 불러와 사용했습니다.

 

그리고 이와 유사하지만 다르게 import / export를 사용하여 불러올 수 있습니다.

/* library.js */

var a = 10;

export default a;


----------


/* index.html */

<script type="module">
    import a from '/library.js';
    
    console.log(a); // 10
</script>

 

위 코드는 library.js와 index.html 파일을 만든 뒤 각각의 코드를 입력합니다.

library.js에서 export default a; 를 선언하여 해당 폴더에서 a라는 값을 내보낸다는 것을 나타내며, index.html에서 script type을 module로 지정한 뒤 내용을 library.js를 찾아서 디폴트 값을 가져오고 그 값을 a라는 곳에 저장시켜두어 사용할 수 있도록 한 것입니다.

 

 

두 개 이상의 export와 그 import 방법

 

/* library.js */

// 방법 1
var a = 10;
var b = 20;

export {a, b}; // 미리 만들어 둔 값을 export 하고 싶을 때 사용


// 방법 2 
export var a = 10; // 우측에 내보낼 값을 작성
var b = 20;

export {b};


----------


/* index.html */

<script>
    import {a, b} from '/library.js';
    console.log(a, b); // 10 20
</script>

 

방법1은 두 개 이상의 값을 export하고 싶을 때 자주 사용되는 방식으로서, 각각 값을 만들어 중괄호에 담아 export 할 수 있다.

방법2처럼 직접 값을 만들어내면서 export할 수 있다.

 

 

728x90

 

 

 

export와 export default를 동시에 사용하고 싶다면?

 

/* library.js */

var a = 10;
var b = 20;
var c = 30;

export {a, b};
export default c;


-----------

/* index.html */

<script> type="module">
    import c, {a, b} from '/library.js'; // import에서 default를 맨 앞에 작성해야 함
    console.log(a, b, c);
</script>

 

export와 export default를 함께 사용할 수 있다. export로 내보낸 값은 내보낸 변수명과 동일한 변수명을 사용할 수 있지만 defult를 통해 내보낸 변수명은 import에서 원하는 이름으로 변경하여 사용할 수 있다.

그리고, import시 가장 먼저 default에 작성된 값을 불러와야 정상적으로 불러올 수 있다.

 

 

 

export를 통해 가져온 변수명을 변경하는 방법

 

/* library.js */

var a = 10;

export {a};


-----------

/* index.html */

<script> type="module">
    import {a as name} from '/library.js'; // as를 사용하면 불러온 값의 변수명을 바꿔 사용할 수 있다.
    console.log(name);
</script>

library.js에서는 a라는 변수명으로 export했지만 사용할 때에는 name이라는 변수명으로 사용하고 싶다면 'as'를 사용하여 손쉽게 바꿀 수 있다.

{a as name}은 a라는 변수명을 불러와 name이라는 값으로 이름을 바꿔 사용하고 싶다. 라는 뜻이 됩니다.