Import와 Export

박태진·2022년 3월 16일

1.Module이란?

- Import와 Export에 대해 알기 전에 Module에 대해 알아야 하는데 Module이란 하나의 파일로 Script.js 1개 = Module 1개 이다.
  • Module 1개를 다른 Module에서 이용할 수 있게 내보내기 위해 쓰는 것이 Export, 다른 Module에서 가져오기 위해 쓰는 것이 Import이다.

2. Export

- Module 1개를 다른 Module에서 이용할 수 있게 내보내는 것 - 방법

1) 해당 Module에서 1개만 내보내는 방법


	const person = ( ) => {
      	return (
          	<div> </div>
        )
    }
    
	 export default person;

2) Module 내 여러 함수들을 내보내는 방법


	export function person(user) {
      console.log(`Hello, ${user}!`);
    }
	export function name(user) {
      console.log(`I'm, ${user}!`);
    }

3) Export를 중복해서 쓰지 않고, 한번에 내보내는 방법


	function person(user) {
      console.log(`Hello, ${user}!`);
    }

	function name(user) {
      console.log(`I'm, ${user}!`);
    }

	export {person, name};

3. Import

1) default export

a. default export는 해당 Module에 유일한 Module이므로 Export 했을 때, 지정된 이름을 사용하지 않고 다른 이름을 사용해도 된다. 그러나 혼란 방지를 위해 그대로 사용하곤 한다.

2) named export

a. named export는 해당 Module에 여러 Module 중 하나이므로 Export했을 때, 지정된 이름을 그대로 사용해야 한다. 만약, default export처럼 이름을 바꿔 Import할 경우 오류가 발생한다. b. { }를 사용해야 한다.

4. Export, Import 예시

1) 기본


	import person from './person.js' //exported as default
	import {person, name} from './person.js' //export as named modules

2) named export의 이름을 바꿔서 Import


	import {person as me, name as family} from './person.js'

'as'를 사용하여 named export의 이름을 바꾼다.

3) 여러 named export를 한번에 Import


	import * as me from './person.js'

' * '를 사용하여 여러 named export를 한번에 Import한다.

4) 꺼내서 쓸 때


	me.person('Lee');
	me.name('Lee');

Export 시켰던 각각의 이름을 사용한다.

0개의 댓글