[ES6] 18. mport / export 를 이용한 파일간 모듈식 개발

Import / export

---

JS코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다.

import 해 온 변수, 함수는 읽기만 가능하고 수정이 불가능한 read-only ****이다.

HTML 파일에서 ES6 import

// index.html

<script type="module">

</scsript>

HTML 파일 안에서 ES6 import 문법을 쓰려면 type="module" 설정이 필요하다.

export default / import

다른 파일에 있는 변수, 함수 , class 등을 사용할 수 있다.

// library.js

var a = 10;
export default a;

------------------------
// index.html

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

JS 파일에서 특정 변수를 다른 파일에서 이용할 수 있게 하려면

export default 변수명

그리고 이 변수를 쓰고 싶은 곳에서

import 변수명 from 경로

exports

JS 파일에서 변수를 여러개 만들고 다 내보내고 싶으면

export 키워드를 여럴번 쓰면 된다.

// library.js

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

------------------------
// index.html

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

export {변수1, 변수2 …} 혹은 export var a = 10; 과 같이 쓴다.

import 시엔 import {변수1, 변수2 ...} from '경로'

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

as

import 시 변수명을 변경하고 싶으면 as 키워드를 쓸 수 있다.

// library.js

var a = 10;
var c = 30;
export {a};
export default c;

------------------------
// index.html

<script type="module">
  import c, {a as 폭발} from 'library.js';
  console.log(폭발);
</script>

---

export 했던 변수들이 무수히 많다면 import 시 일일히 다 적어줘야 하는 어려움이 있기 때문에 변수들을 object에 담아서 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, * as 변수모음 from 'library.js';
  console.log(변수모음.a);
  console.log(c);
</script>

‘*’ 기호를 사용해 export {} 의 데이터들을 모두 import 할 수 있다.

이 때, as 키워드를 이용해 새로운 변수명을 지정해 주어야 한다.