import / export 를 왜,언제,어떻게 쓰는가?

자바스크립트 코드가 길어지면 다른 파일로 쪼개는게 좋은 관습이다. 

쪼개놓으면 js 파일에는 js 코드만, html 파일에는 html 코드만 있어서 유지보수하기도 좋을것이다. 

 

일단 파일을 두개 만든다. import.html, export.js 파일 두개를 만든다.

(export.js)

let a = 10;
let b = 20;
let c = 30;

(import.html)

<script src="export.js">

</script>

<script> 태그 안에 src 속성을 부여하고 "export.js"를 불러오면 export.js에 있는 모든 코드를 다 불러온다. 이때 src로 불러오면은 import.html 파일 <script> 태그내에서 export.js에 있는 변수를 사용하지 못한다. 스코프가 달리지기 때문이다. 더 자세한 내용은 아래 포스팅을 참고하자.

2023.03.27 - [에러 || 디버깅 노트] -

 

 

 

그렇다면 import.html 파일 <script> 태그에서 export.js에 있는 변수, 함수, class를 사용하고 싶다면 어떻게 해야할까?

(참고) import 해온 변수, 함수, class는 사용은 가능하지만 수정은 불가능하다. read-only 이다.

-> ES6 import/export 문법을 사용하면 된다.

-> import/export 문법을 사용하려면 <script> 태그 속성에 type="module" 속성을 부여해야한다. 

 

import/export 사용법에도 여러가지 사용법이 존재한다. 그 방법들을 한번 다뤄보겠다. 

 

 

 

 

 

(1) export default / import

(export.js)
let a = 10;
let b = 20;

export default a;

(import.html)
<script type="module">
  import 자유롭게작명 from '/import.js';
  console.log(자유롭게작명); // 10
</script>

 

JS 파일에서는 특정 변수를 다른 파일에서 이용할 수 있게 내보내고 싶으면 export default 변수명 이라고 하면 된다.

그리고 그 변수를 가져다쓰고 싶다면 다른 파일에서 import 자유롭게작명 from '경로' 하면 된다.

 

여기서 자유롭게작명이 가능한 이유는 default라는 키워드 때문이다. default 키워드를 사용하면 기본적으로 그 변수만 export 해준다.

그렇기 때문에 import 할 때도 그 변수가 확정으로 불러와지기 때문에 자유롭게 작명이 가능하다.

 

🚨 (주의할 점)

export default는 한번만 쓸 수 있다. default 키워드 때문이다.

 

 

 

 

 

(2) export / import (여러개를 내보내고싶다면)

-> 변수 여러개를 보내고 싶다면 export { 변수명1, 변수명2, ... } 혹은 export let c = 30; 이렇게 써도 된다.

(export.js)

let a = 10;
let b = 20;
export let c = 30;

export { a, b };

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

  console.log(a); // 10
  console.log(b); // 20
  console.log(c); // 30
</script>

🚨 (주의할 점)

export로 여러개 보내려면 중괄호 { }로 감싸야하고, import 할 때도 export 할 때와 같은 변수명을 작성해야 한다. 

 

 

 

 

 

(3) export와 export default 동시에 사용

(import.html)

<script type="module">
  import 자유롭게작명, { a, b } from '/export.js';

  console.log(a);
  console.log(b);
  console.log(자유롭게작명);
</script>

(export.js)

let a = 10;
let b = 20;
let c = 30;

export { a, b };
export default c;

🚨 (주의할 점)

export default 한거를 반드시 import 할 때 먼저 작성해야한다.

이게 무슨 뜻이냐면은 import {a, b}, 자유롭게작명 이거는 안된다는 뜻이다.

 

 

 

 

 

(4) export시 변수명 바꾸는 방법 (as 키워드 사용)

(import.html)

<script type="module">
  import 자유롭게작명, { a as num1, b as num2 } from '/export.js';

  console.log(num1);
  console.log(num2);
  console.log(자유롭게작명);
</script>

(export.js)

let a = 10;
let b = 20;
let c = 30;

export { a, b };
export default c;

as 키워드를 사용하면 export 사용했을때 변수명을 바꿀 수 있다.

 

 

 

 

 

(5) import 할 때 변수들이 너무 많으면 * 기호를 쓴다.

(import.html)

<script type="module">
  import 자유롭게작명, * as 변수모음 from '/export.js';

  console.log(변수모음); // Module {Symbol(Symbol.toStringTag): 'Module'}
  console.log(변수모음.a); // 10
  console.log(변수모음.b); // 20
  console.log(자유롭게작명); // 30
</script>

(export.js)

let a = 10;
let b = 20;
let c = 30;

export { a, b };
export default c;

* 을 쓰면 export { a, b } 에서 a, b를 객체에 담을 수 있다. 

 

🚨 (주의할 점)

그냥 쓰면 안되고 as 키워드로 별명을 반드시 지어줘야한다.

 

 

 

 

 

옛날엔 require, module.exports 라는게 있었다. 

옛날에 Require.js 라이브러리를 쓰거나 nodejs 개발시 

자바스크립트를 모듈식으로 개발이 가능했었다. 

(export 하는 js파일)

module.exports.a = 10 ;

------------------------
(import 하는 js파일)

var 가져온거 = require('/library.js'); 

이러면 a를 쓸 수 있었다. 

근데 이제는 ES6 import/export를 쓰면 되기 때문에

아 그냥 저런게 있었구나 라고 이해만 해도 된다.

 

그리고 import/export는 당연 IE(인터넷 익스플로어) 호환성이 없기 때문에

단순한 html css js 프론트엔드 개발시 JS파일을 HTML에 첨부하시려면

<script src="경로"></script> 이걸 쓰도록 하자. 

 

혹은 모던 브라우저(크롬, 사파리, 파이어폭스)에서는

<script type="module" src="경로"></script> 이렇게 하면

import export 문법이 사용가능해지는데

대부분은 리액트, 뷰, nodejs 이런거할 때 많이 사용하게 된다.