import / export

ES6 import/export를 사용하면 내가 원하는 변수, 함수, class만 다른 파일로 보낼 수 있다.

⭐ 우선 script 태그 안에 type='module'을 설정해줘야 한다.

<script type="module">

</script>

🪜 export default / import

(library.js)

var a = 10;
export default a;

(index.html)

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

• 특정 변수를 다른 파일에서 이용할 수 있게 내보내기: export default 내보낼거

• 그 변수를 가져다 쓰기: import 가져올거 from '경로'

• export default를 쓰면 import시 내보낼거라는 변수명은 아무렇게나 작명 가능

• export default는 파일당 한번만 사용 가능

🛒 여러개 export 하기

(library.js)

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

(index.html)

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

• 여러개의 변수 내보내기: export {변수명1, 변수명2 ...}

• 여러개의 변수 가져오기: import {변수명1, 변수명2 ...} from '경로'

• export를 쓰면 import시 export 할 때 사용한 변수명을 똑같이 써줘야 한다.

• export 키워드는 변수/함수 선언 왼쪽에 써도 된다. ex) export var a = 10;

🎁 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';
</script>

⭐ export default 한건 import시 맨 왼쪽에 써줘야 한다.

🎀 변수명 새로 짓기

(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';
</script>

import {변수 as 새변수명} from '경로'를 써주면 된다.

🗄️ * 기호로 모두 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);
</script>

• import * as 변수들명 from '경로'를 써주면 된다.
• * 기호는 'export { } 했던 애들을 그냥 다 import 해주세요~' 라는 뜻
• ⭐ 그냥 쓰면 안되고 as로 별명을 꼭 지어주어야한다.