# import, export를 이용한 파일간 모듈식 개발

📌 JS 파일에 있는 변수, 함수 등을 다른 파일에서 가져다 쓰는 방법

• html & js, js & js 간에 가능

1. type = "module" 로 수정.
2. 가져올 파일의 요소를 import
3. 해당 JS 파일에서 해당 요소를 export

기본 형태

html

<script type="module">
	import a from './library.js';
</script>

library.js

var a = 10;
export default a;

참고) import 해온 변수, 함수는 사용은 가능하지만 수정은 불가능함.
read-only

1. export default

• import할 때 이름 바꿔도 됨.
• 한 번만 쓸 수 있음.

html

<script type="module">
	import b from './library.js'; // a를 가져와서 b라는 이름으로 저장
</script>

library.js

var a = 10;
export default a;

2. export

• 여러개를 export할 때는 export default를 쓸 수 없기 때문에 그냥 export를 해줌. (단, 중괄호 안에 넣어서!)

html

<script type="module">
	import {b} from './library.js'; // a를 가져와서 b라는 이름으로 저장
</script>

library.js

var a = 10;
var b = 20;
export {a,b};

• export는 변수/함수 선언 왼쪽에 써도 됨.
  export var a =10;

• export시 변수이름 똑같이 써야 함.

<script type="module">
	import {a} from './library.js'; 
</script>

library.js

var a = 10;
var b = 20;
export {a,b};

3. export, export default 동시 사용

• import할 때 이름을 똑같이 가져오면 export를 가져오고, 이름을 다르게 가져오면 export default를 가져온다.

• export, export default를 동시에 import하기 :
  주의 : default 순서를 제일 왼쪽에 받아온다.
  

html

<script type="module">
import new,{a,b} from './library.js';
</script>

library.js

var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;

4. export의 변수명 새로 짓기

• as를 사용함.

<script type="module">
	import {a as 별명} from './library.js';
</script>

5. 전부 import 해오고 싶을 때

• *을 사용함.
• 별명을 지어줘야 함.

<script type="module">
	import * as 변수들별명 from './library.js';
</script>

주의 : export default 한거는 따로 가져와야 함.

html

<script type="module">
	import c, * as 변수들명 from './library.js';
</script>

library.js

var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;

참고)

IE에선 import, export가 안된다. (호환성이 안좋음)
-> 호환성을 위해 프론트엔드 개발에선 보통 <script src="">를 쓴다.

📌 아래 경우에는 import, export를 자주 사용함.

1. React, Angular
2. JS 파일 나눌 때