JavaScript(export, import)

import 와 export 사용하기

import, export 문법은 외부 모듈에서 기능을 가져오는 데 사용됩니다.

다른 모듈에서 내보낸 함수, 객체, 변수 등을 현재 모듈에서 사용할 수 있도록 합니다.

 

우선, 파일 안에서 import 문법을 쓰려면 script 태그 안에 type을 mocule로 설정해야 합니다.

<script type="module">

</script>

 

 

 

export default / import

(library.js)

var a = 10;
export default a;

(index.html)

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

export default를 쓰면 다른 파일의 변수, 함수, 클래스 등을 가져올 수 있습니다.

js 파일에서 특정 변수를 다른 파일에서 쓸 수 있도록 보내고 싶을 때 export default 변수명을 사용할 수 있습니다.

그리고 해당 변수를 가져다 쓰고 싶은 곳에서 import 작명 from '절대 경로 또는 상대경로' 를 사용합니다.

 

 

 

export / import

(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{변수명1, 변수명2 ...} 과 같은 방식을 쓸 수 있습니다.

또는 export var a = 10; 과 같은 방식으로 바로 export 하는 방법도 있습니다.

변수를 가져올 때는 import{변수명1, 변수명2 ...} from '경로' 를 사용하면 됩니다.

 

export default는 한 번만 쓸 수 있지만, import 할 때 변수명을 새롭게 작명할 수 있습니다.

하지만 그냥 export를 할 때에는 import 할 때도 정확히 변수명을 써줘야 합니다.

 

 

 

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 as 폭발} from 'library.js';
  console.log(폭발);
</script>

위와 같은 방식으로 export 와 export default를 동시에 사용할 수도 있습니다.

여기서 중요한 점은 import 할 때 export default를 맨 왼쪽에 쓰고 eport 했던 변수들을 중괄호 안에 적어줘야 합니다.

 

 

 

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>

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';
  console.log(변수모음.a);
  console.log(c);
</script>

export 하려는 변수들이 너무 많을 경우에는 * 기호를 사용하여 한 번에 import 할 수 있습니다.

단, * 기호를 사용하여 한 번에 변수들을 가져올 때는 as 로 작명을 하고 가져와야 합니다.