JS중급_import/export

▶️ 모듈화를 위한 import/export

• JS코드가 길어지면 다른 파일로 분리하는게 좋은 관습이다.
• ES6의 import /export 를 사용하면 변수, 함수, class, array 등 내가 원하는 데이터만 다른 파일로 보낼 수 있다.
• import한 변수, 함수, array 등은 사용은 가능하지만 수정은 불가능하다. read-only이다.

  //index.html

  <script type="module">
    
  </script>

• HTML 파일 안에서 ES6 import 문법을 쓰려면 위와 같이 script 태그 안에 type을 module로 설정 해야한다.

  //library.js

  var a = 10;
  export default a; // a라는 변수를 기본으로 export 하겠다.

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

• JS 파일에서는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면 export default 변수명이라고 명명하면 된다.
• 그리고 그 변수를 가져다 쓰려면 다른 파일에서
  import ~ from <경로>라고 사용하면 된다.
• import시 변수명은 아무렇게나 작명이 가능하다.

---

▶️ 여러개 export 하기

//library.js
	var a = 10;
	var b = 20;
	var c = 30;

	export {a, b};

// export var a = 10; 이렇게 쓸 수도 있다. 

// index.html 

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

• export 라고 쓸 땐 export {변수명1, 변수명2 ... }
  으로 담아 주어야한다.
• 이를 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 ; 
// export var a = 10; 이렇게 쓸 수도 있다. 

// index.html 

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

• import시에 export default한 요소를 맨 왼쪽에 써주면 되고, 그 이후 {}중괄호 안에 export 했던 변수들을 적어주면 된다.

---

▶️ import한 변수의 변수명 새로 짓기

//library.js
	var a = 10;
	var c = 30;

	export a=;
	export default c ; 
// export var a = 10; 이렇게 쓸 수도 있다. 

// index.html 

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

• 변수명 as 새 변수명으로 바꿔주면 변수명을 바꿔서 사용할 수 있다.

---

▶️ import할 변수가 많다면 * 기호

//library.js
	var a = 10;
	var b = 20;
	var c = 30;
	var d = 40;

	export {a,b,c};
	export default d ; 
// export var a = 10; 이렇게 쓸 수도 있다. 

// index.html 

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

• 변수명이 일정 개수가 넘어가면 일일히 써줘야하는 불상사가 생기므로, 이를 위해 export 된 변수들을 모두 import 해줄 수도 있다.
• ' * as ~ ' 의 형식으로 as 뒤에 따로 변수명을 지정해줘야 한다.
• 이경우에도 export default 로 import 한 변수는 그대로 import 해주면 된다.

---