Exports와 Imports (default export 그리고 named export)

위의 유데미 강의 13강 Exports와 Imports의 내용이다.

 

default 키워드와 같이 export하는 방법과 const와 함께 export하는 경우가 있다.

이 둘의 차이점이 뭘지 고민해보자.

 

 export의 두 종류

// person.js
const person = {
  name: 'Max'
}
export default person

// utility.js
export const clean = () => { ... }
export const baseData = 10;

위와 같이 export된 경우 import 시 다르다는 것을 알게되었다.

 

 다른 export에 따른 import 방법

 

먼저, default 키워드로 export된 경우이다.

// app.js
import person from './person.js'
import prs from './person.js'

항상 default export가 내보낸 것을 기본값으로 가져온다는 의미한다.

그래서 person.js에서 person을 import하면 원하는 대로 객체의 이름을 정할 수 있다.

person을 쓰든 prs을 쓰든 같은 default로 표시한 것을 참조한다.

 

하지만, utility.js에서 두 개의 다른 상수를 불러오는데 그 파일에서 특정한 어떤 것을 명확하게 가리키기 위해

중괄호를 사용하게 되는데 이것을 named export라고 한다. 이름으로 어떤 것을 불러오기 때문이다.

import { baseData } from './utility.js'
import { clean } from './utility.js'

import { baseData, clean } from './utility.js'

그리고 Import문에 콤마를 넣어서 한 문장으로 작성할 수도 있다.

named export에서 다른 별칭을 사용하고 싶다면 as를 이용하자.

import { smth as Smith } from './utility.js'

마지막으로 특수 문자 *를 사용해서 모든 것을 Import할 수도 있다.

import * as bundled from './utility.js'