import/export 문법

 

자바스크립트 코드가 길어졌을 시 다른 파일(모듈)로 쪼개는 것이 좋다.

다른 파일로 쪼개놓고 첨부해서 사용하는 방법이 import / export  이다.

 

- import: 다른 파일(모듈)로부터 원하는 함수나 클래스, 변수 등을 가져올 때 사용.

- export: 함수나 클래스, 변수 등을 다른 곳에서 쓸 수 있도록 내보내기 하는 기능.

 

 

▼HTML 파일 안에서 ES6 import 문법을 쓰려면 script 태그 안에 type을 mpdule로 설정해주어야 한다.

(index.html)

<script type="module">

</script>

 

 

 

import/export 문법을 사용하게 되면,

※ import 한 원하는 변수, 함수, class는 전부 사용 가능, 하지만 수정은 불가능!

 

 

 

특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶다면 export default '변수명' 이라고 작성,

그 변수를 가져다쓰고 싶다면

다른 파일에서 import '변수명' from '경로' 이렇게 작성하면 된다.

 

 

 export default

 

 

내보내고자 하는 대상이 하나인 경우  --> export default  a;

(ex. class 자체를 외부에서 사용하게 하려는 경우).

class Slide {
  //...
}
export default Slide;

 

 

import하는 경우 --> 중괄호 없이 불러옵니다.

/* view/test.js */
import Slide from '../src/slide.js'
...

 

※ default export는 아래와 같이, 가져올 때 이름이 원래 것과 달라도 상관없습니다. (원래: Slide)

/* view/test.js */
import SlideClass from '../src/slide.js' // 가져오는 이름을 Slide 대신 SlideClass로 해도 아무 문제 없음
...

 

 

 

export { 변수명, 변수명... }

(library.js)

var a = 10;
export default a;

내보내고자 하는 대상이 여러개인 경우  --> export {변수명1, 변수명2...}

export 키워드러 내보낸 것들을 import 할 땐 --> import {변수명1, 변수명2...} from '경로'

 

(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 와 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>

export dafault 한 것은 왼쪽에, 나머지 변수들은 중괄호 안에 적어주면 된다.