ES6 import & export

[ Node.js ]

 

Node.js 에서 쓰는 모듈화는 Common.js의 것이다.

 

require('경로 or 패키지 이름') 로 불러오고 이를 변수나 상수로 담는다.

 

가져와야 할 파일 안에서는 module.exports = (somthing) 으로 require 를 실행했을 때 리턴되는 값이나 함수를 넣는다.

 

 

 

[ ES6 ]

 

하지만 ES6 가 공개된 이후에는 모듈화를 자바스크립트에서 공식으로 지원한다.

 

import 담을 변수 from '경로 or 패키지 이름' 으로 불러오고

 

export default (somthing) 으로 불러왔을 때 담길 리턴값을 설정할 수 있다.

 

다만 default 를 없애고 그냥 export를 쓰는 방법이 있다. 이 export는 여러번 지정할 수 있다.

 

export (something) 

 

export (something2) 

 

로 파일 상에서 export 해주고 import { something, something2 } from ' 경로 or 패키지 이름 ' 으로 불러와 줄 수 있다. 해체 할당을 활용해서 한번에 여러 개를 할당 할 수 있는 편한 기능이다.

 

그냥 export와 default 를 섞어서 쓸 수도 있다.

 

export default (somthing1)

 

export (something2) 

 

export (something3) 

 

로 파일 상에서 export 해주고

 

import somthing1, { something2, something3 }  from ' 경로 or 패키지 이름 '

 

으로 불러와주면 각각이 담기게 된다.

 

이 때, export와 export default 두 가지 경우 모두 다 불러온 파일상의 변수나 상수 혹은 함수 이름과 같은 이름으로 불러와야 하지만, 이름을 따로 지정하면서 불러오고 싶은 경우,

 

import somthing1 as 지정할 이름, { something2 as 지정할 이름 , something3 as 지정할 이름  }

 

이렇게 추가 해주면 된다.

 

export 를 활용할 때 (export default 말고) export로 지정된 모든 것을 한꺼번에 가지고 오고 싶을 때가 있을 것이다. 그럴 때는 와일드 카드를 이용해서

 

import somthing1, * from ' 경로 or 패키지 이름 '

 

로 불러올 수 있다. import 문을 쓴 파일 상에서는 불러온 파일 안에서 지정된 것과 똑같은 이름을 써야 한다. 문제는, 파일이 분리되어 있어서 그냥 이렇게 가져오면 불안 요소가 있다는 것이다.

 

그래서

 

import somthing1, * as 지정할 이름 from ' 경로 or 패키지 이름 '

 

이런 식으로 파일 안의 모든 export 값들을 담을 object 의 이름으로 지정할 이름을 as 로 정해준다.

 

default 와 export가 구분되어 있는 이유는, 파일 전체나 매우 큰 부분을 불러올 것인지, 파일의 일부만을 불러올 것인지를 번들링 단계에서 정할 수 있다는 장점이 있기 때문이다. 번들러는 import를 어떻게 했는지에 따라 그에 맞춰서 필요한 부분들만을 가져와준다. 이 두 가지 방식이 섞여 있는 일이 많기에, 트랜스파일러나 번들러를 통해 통합해주는 작업이 필요하다.