JavaScript(import/export)

1. export default / import

• 변수,함수,class 모두 첨부 가능
• 기본값으로 받아오는 a변수는 import 시에 새롭게 작명한 변수에 저장 가능
• export default는 한번만 사용가능

(library.js)
var a = 10;
export default a;
------------------------
(index.html)
<script type="module"> // 타입을 모듈로 설정
  import b from 'library.js'; // b에 첨부한 기본값 a 저장.
  console.log(b); // 10
</script>

2. 여러개 export 가능

• export는 첨부하고 싶은 것에 맞게 여러번 사용 가능
• export시 담은 변수명은 import시에도 정확히 같은 변수명에 저장해야 사용 가능
• export, import시 중괄호 안에 변수명들 저장

(library.js)
var a = 10;
var b = 20;
export {a, b};
------------------------
(index.html)
<script type="module">
  import {a,b} from 'library.js'; // a,b 에 첨부해온 a,b 저장
  console.log(a,b); // 10, 20
</script>

3. export, export default 동시 사용

• 두개 동시에 사용가능하고, 단 기본값으로 첨부된 변수는 import시에 맨왼쪽에 작성.

(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'; 
  console.log(c); // 30
</script>

4. 변수명 변경은 as

• export를 사용할 경우 import시에 정확한 변수명을 작성해야 하지만, 만약 변수명을 변경하고 싶다면 as를 사용. (물론 export default도 변경 가능)

(library.js)
var a = 10;
var c = 30;
export {a};
export default c;
------------------------
(index.html)
<script type="module">
  import c as 간지, {a as 폭발} from 'library.js';
  console.log(간지);
  console.log(폭발);
</script>

5. 너무 많은 import는 *(전체)기호 사용

• export하는 변수가 100개면 import할 변수를 100개 작성해야 하기 때문에, 변수들을 한꺼번에 object에 담아서 import하는 방식인 *기호를 사용.
• *기호를 사용할 시 반드시 as를 통해 변수명을 작명, 그러면 그 변수명은 오브젝트가 되어 변수명(오브젝트).변수로 사용 가능

(library.js)
var a = 10;
var b = 20;
var c = 30;
export {a,b};
export default c;
------------------------
(index.html)
<script type="module">
  import c, {* as 변수모음} from 'library.js'; //변수모음이라는 object에 전부 저장
  console.log(변수모음.a); //변수모음이라는 object 중에 a 변수 출력 -> 10
  console.log(c); // 30
</script>

참고

• require, module.exports
  (옛날 방식으로 파일을 쪼개어 연결하는 방식이다)

(export 하는 js파일)
module.exports.a = 10 ;
------------------------
(import 하는 js파일)
var 변수명 = require('/library.js'); 

• import/export는 당연 IE 호환성이 없기 때문에 단순한 html,css,js 프론트엔드 개발시 JS파일을 HTML에 첨부하려면 다음과 같이 사용.

<script src="경로"></script> 

또는 모던 브라우저에선 다음과 같이 작성하면 import export 문법이 사용가능한데
대부분 리액트,뷰, nodejs에서 많이 사용.

<script type="module" src="경로"></script>