[코딩애플] js part 3-2. import / export를 이용한 파일간 모듈식 개발

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 사용하는 때는?

1. React, Angular 이런거 쓸 때
2. 또는 js파일 나눌 때