[JavaScript] import/ export : js파일 모듈식으로 가져오고(import), 내보내기(export)

import/ export

- ES6에서 도입된 js 파일 가져오고(import) 내보내는(export) 방식 

- js파일 전체를 가져오는게 아니라, 사용할 변수를 선택해서 export, import하는 방식이다.(모듈 형식으로 import, export)

- vue나 react에서 이런 방식으로 많이 사용한다.

- 그런데 고전적인 <script src="js파일경로"></script> 가 호환성은 더 좋긴함.

 

#1. 기본사용법

1. 가져올 js 파일 만들기

- 마지막에 내보내고 싶은 데이터는 하단의 방법으로 내보내준다.

변수1 = 10;
export default 변수1

 

2. js 파일 가져오기

- 아래의 방식으로 가져온다.

- script type은 꼭 module로! 

<sciript type="module">  //  script type은 module!!
	import 가져올거 form '경로'
</sciprt>

 

3. 예제를 사용하여 export하고 import 하기

- js 파일에서 export

- import 해오고 싶은 파일에서 import 

- 나는 library.js 에서 export

- index.html 에서 import 해왔다고 가정했다. 

- 다음 예제와 같이 작성하면 a라는 데이터를 잘 가져온다.

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
var a = 10;

// 형식 : export default 내보내고싶은변수명;
export default a;



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module"> //  script type은 module!!
	// 형식 : import 가져올거 form '경로'
    import a from './library.js'

    console.log(a) // 출력결과 >> 10
</scirpt>

 

#2. export 하고 import 하고싶은 값이 여러개라면?

1. 기본형식

- export 키워드를 사용한다.

- export default 는 export 의 기본값을 설정하는 거라, 1개만 사용가능하다.

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
// .. 변수들 정의

export {내보내고싶은변수명들};



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module">
import {가져올것들} form '경로'
</scirpt>

2.적용한 예제

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
var a = 10;
var b = 20;
var c = 30;

// 형식 : export {내보내고싶은변수명들};
export {a, b, c};



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module">
	// 형식 : import {가져올것들} form '경로'
    import {a, b, c} from './library.js'

    console.log(a, b, c) // 출력결과 >> 10 20 30
</scirpt>

 

#3. 여러개를 export 하고 하나의 값을 default값으로 설정하고 싶다면?

1. 기본형식

- export 할때 default 변수는 export default로 따로 내보내고,

- 나머지 변수는 export {}로 한꺼번에 내보내준다.

 

- import 할때도, import 디폴트변수, {나머지} 형태로 따로 불러와준다.

-  (!!주의)이때, 디폴트 변수는 항상 앞에있어야한다  

ex) import {나머지변수들}, 디폴트 변수     ..> 저런식으로 import 하면 오류남.

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
// 변수들 작성.. 

export {default제외내보내고싶은 변수들};
export default 디폴트변수



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module">
	import 디폴트변수, {default제외 나머지변수들} form '경로'
</scirpt>

 

2. 적용예시

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
var a = 10; // 이걸 default값으로 설정하고 싶다면
var b = 20;
var c = 30;

// 형식
// export {default제외내보내고싶은 변수들};
// export default 디폴트변수
export {b, c};
export default a;



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module">
	// 형식 : import 디폴트변수, {default제외 나머지변수들} form '경로'
    import a, {b, c} from './library.js'

    console.log(a, b, c) // 출력결과 >> 10 20 30;
</scirpt>

 

#4. import 할 변수명을 바꾸고 싶다면?  >> as 사용

1. 기본형식

- import 할때 변수명 as 새변수명 형식으로 써주면됨.

import 디폴트변수 as 새변수명 {변수 as 새변수명} from '경로'

2. 적용예시

// ==== 파일명 : library.js
// 1. js 파일 만들고 내보내고 싶은 변수를 export 해준다.
var a = 10; // 이걸 default값으로 설정하고 싶다면
var b = 20;
var c = 30;

// 형식
// a를 디폴트로, b,c를 그냥 내보냈다고 가정.. 
export {b, c};
export default a;



// === 파일명: index.html
// 2. 가져오고 싶은 파일을 import 해오기
<script type="module">
	// 형식 : import 디폴트변수 as 새변수명 {변수 as 새변수명} from '경로'
    import a as newA, {b as newB, c} from './library.js'

    console.log(newA, newB, c) // 출력결과 >> 10 20 30;
</scirpt>

 

#5. 완전 많은 변수를 더 한꺼번에 보내고싶으면 >> * 쓰셈

1. 기본형식

import 할때 다음과 같은 방식으로 import 해오면됨.

import 디폴트변수, * as 변수모음 from "./library.js";
console.log(변수모음.a);
console.log(디폴트변수);

 

 

결론 >>

- 모듈방식으로 js 를 import / export 할때는 이걸 사용하자.  (vue, react, node,, 등 환경에서 실제로 많이 쓰더라.. )

- 아직은 그 외의 환경에서는 <script src="경로"></script> 를 많이 쓰는거같다.