import / export를 이용한 파일간 모듈식 개발
기본적인 방법(전통적인 방법)
.js(library.js) 파일을 만들어서 자바스크립트를 보관한다.
<script src="library.js">
</script>
이렇게 **모듈화**해서 개발할 수 있다.
ES6: import/export
**<u>import</u> 가져올거 <u>from</u> '경로'** 로 파일을 다른 파일을 가져올 수 있다.
<script type="module">
import a from '/library.js';
</script>
근데 library.js에 있던 모든 내용을 가져오지 않는다. 필요한 정보만 가져올 수 있다.
**<u>export default</u> 내보낼거**
// library.js
var a = 10;
export default a;
a를 가져왔는지 확인해보자.
<script type="module">
import a from '/library.js';
console.log(a); // 10
</script>
특징
export default를 쓰면 import할 때 이름을 바꿔도 됨
<script type="module">
import 작명가능 from '/library.js';
console.log(작명가능);
</script>
export default는 파일당 1회 사용
var a = 10;
var b = 20;
export default a;
export default b; // 에러 발생
여러개를 내보내는 export 문법
여러개를 export하고 싶다면 export 키워드만 사용해야 한다.
- **import {가져올것들} from '경로'**
- **export {내보낼것들}**
따로해도 되고
var a = 10;
var b = 20;
export {a};
export {b};
같이 묶어도 된다
var a = 10;
var b = 20;
export {a, b};
export 키워드는 변수/함수 선언 왼쪽에 써도 된다
코딩하는 중간중간에 내보내고 싶을 때 작성한다.
export var a = 10;
export var b = 20;
export만해서 내보낸건 변수이름을 똑같이 써야한다
var a = 10;
var b = 20;
export {a, b};
a, b 전체를 무조건 다 가져올 필요는 없다. 필요한 것만 가져올 수 있다.
<script type="module">
import {b} = from '/library.js';
console.log(b); // 20
</script>
export와 export default는 동시 사용 가능
갖다 쓰는 방법이 다른거지, 동시에 써도 상관없다.
var a = 10;
var b = 20;
var c = 30;
export {a, b};
export default c;
Q. export default했던 c를 import 해오고 싶으면?
A. 자유롭게 아무 값으로 작명해도 된다.
import 작명 from '경로'
Q. export 했던 a나 b를 import 해오고 싶으면?
A. import {변수명} from '경로'
Q. export default c 와 export {a,b} 동시에 import?
A.
import c, {a, b} from '/library.js';
변수명이 마음에 안들면 새로 짓자 (import {변수 as 새변수명} from '경로')
import {a as 별명} from '/library.js';
console.log(별명); // 10
Q. b변수도 별명지어서 import 하려면?
A.
import {a as 별명, b as 비} from '/library.js';
전부다 import 해오는 * 기호 (import * as 변수들명 from '경로')
import * as 별명 from '/library.js'
console.log(별명.a); // 10
conosle.log(별명.b); // 20
console.log(별명.c); // undefined
**export default로 했던 c**는 안나온다. 왜냐하면 c는 *에 없고, **import 변수 from '경로'**로만 가져올 수 있다.
import c, * as 별명 from '/library.js';
console.log(c); // 30
console.log(별명); // {a: 10, b: 20}
Recap
- **옛날 방식**: var 변수 = require('경로')
- 여러개를 내보내는 export 문법: **export {내보낼것들}**
- 하나만 내보내는 export default 문법: **export default 내보낼거**
근데 ES6 문법이다보니까 호환성이 좋지 않다. 그래서 IE에선 안된다.
보통 프론트엔드 개발에선 <script src="">를 쓰자.
그럼 import/export 사용하는 때는?
- React, Angular 이런거 쓸 때
- 또는 js파일 나눌 때
'Front-End: Web > JavaScript' 카테고리의 다른 글
[코딩애플] js part 3-4. 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리 (0) | 2022.10.21 |
---|---|
[코딩애플] js part 3-3. Stack, Queue를 이용한 웹브라우저 동작원리 (0) | 2022.10.21 |
[코딩애플] js part 3-1. 틀린그림 찾기능력이 향상되는 Destructuring 문법 (0) | 2022.10.21 |
[코딩애플] js part 2-8. class, extends, getter, setter 연습문제 (0) | 2022.10.21 |
[코딩애플] js part 2-7. getter, setter 대체 왜 쓰는지 알아보기 (0) | 2022.10.21 |