[JS ES6]-[25] import / export 핵심만 이해하기

 

안녕하세요.

이번 글에서는 자바스크립트에서의  import / export 핵심만 알려드리겠습니다.

 

1. 사용이유

코드가 많아지면 파일을 분리해서 작업하는 게 좋은데요.

이렇게 분리된 각각의 파일을 모듈이라고 부릅니다.

 

즉 모듈(module)은 파일 하나입니다.

이 모듈에 export와 import를 이용하면 만들어진 모듈의 코드(변수, 함수 등)를 사용할 수 있습니다.

 

2. 사용방법

먼저 index.html파일에 scipt.js의 코드를 가져오는 경우를 들겠습니다.

html파일에서 import를 사용하시려면 type을 module로 설정해줘야 합니다.

 

//index.html

<script type='moudle'></script>

 

2.1 단일 export, import (export default)

단일 값을 가져오고 싶으면 default키워드를 사용해야 합니다.

 

//script.js
var name = 'kim';
export default name;

//index.html
<script type="module">
  import name from 'script.js';
</script>

default export는 해당 모듈에 유일한 모듈이어서 import 할 때 이름 말고 다른 이름으로 바꿔도 됩니다.

(import name 말고 import hi 도 가능)

 

2.2 여러 개 export, import (named export)

여러 개의 값을 가져오고 싶으면 여러 번 export를 사용하면 됩니다.

//script.js
var name = 'kim';
export var age = 10;

export {name};

//index.html
<script type="module">
  import {name, age} from 'script.js';
</script>

export 할 때 괄호 안에 넣거나, 변수 앞에 export를 붙여 export 할 수 있습니다.

1. export {변수명, 변수명};

2. export var age = 10;

 

 

2.3 as로 변수명 새로 짓기

변수를 괄호에서 import 할 때, as를 사용하면 변수명을 바꿀 수 있습니다.

 

//script.js
export var age = 10;

//index.html
<script type="module">
  import {age as brother_age} from 'script.js';
</script>

 

2.4 *로 전체 import 해오기

가져올 변수들이 너무 많으면, *을 사용하여 객체에 담아 import 할 수 있습니다.

//script.js
var name = 'kim'
var age = 10

export {name, age};

//index.html
<script type="module">
  import * as man_info from 'script.js';
	
  console.log(man_info.name)  //kim
</script>

 

 

2.5 응용하기(default export + export)

만약 default export, export 둘 다 쓰고 싶으면 어떻게 해야 할까요?

default export와 export 사용하던 대로 사용하면 됩니다.

 

//script.js
var name = 'kim'
var age = 10;

export {name};
export default age;

//index.html
<script type="module">
  import age, {name} from 'script.js';
</script>