[Javascript ES6] 기초 문법 13. Import, Export

 

 

 

Import, Export

 

 

import, export를 통해 다른 js 파일에 작성한 내용을 가져오거나 내보낼 수 있다.

import 변수작명 from '경로'

export default 내보낼내용

 

export default는 한번만 사용할 수 있지만, export는 여러번 사용할 수 있다. 따라서 여러개를 export 할 때 export를 사용한다. export만 하였을 경우에는, export와 import의 이름을 동일하게 사용해야 한다. export 한개로 여러개를 내보내고자 할 때는 중괄호를 사용해 주어야 한다.

export {a,b}

import {a,b}

 

또는, 변수 왼쪽에 export를 써도 된다.

 

//export 옆에 있는 내용이 모두 export된다.

export let name='chali';

 

만일 export와 exrpot default를 함께 사용했을 경우에는 export 한 대로 import를 해 와야 한다.

(ex.js)

	let name = 'chali';
	let age = 10;
	let gender = 'boy';

	export {name, age};
	export default gender;



(index.html)

<script>

	import gender, {name,age} from 'ex.js'

</script>

 

 

as 를 사용하여, import로 가져온 것을 새롭게 작명해 사용할 수 있다.

(ex.js)

	let name = 'chali';
	let age = 10;
	let gender = 'boy';

	export {name, age};
	export default gender;



(index.html)

<script>

	import gender, {name as nikname} from 'ex.js'

</script>

 

*을 사용하여, export로 내보낸 여러 변수를 한꺼번에 가져올 수 있다. 이 때 반드시 as를 사용해 주어야 한다.

 

(ex.js)

	let name = 'chali';
	let age = 10;
	let gender = 'boy';

	export {name, age};
	export default gender;



(index.html)

<script>

	import gender, * as all from 'ex.js'

</script>