export문

자바스크립트 모듈의 values(객체, 함수, 원시 값)를 내보낼 때 사용한다.

아래와 같이 2가지 방법을 사용할 수 있고, 약간의 차이점이 존재한다.

export default values

or

export {values as default}

export default values 문은

한개의 모듈만 내보낼 수 있으며 import할 때 네이밍을 커스텀하게 사용할 수 있다.

예를 들어 child1,2.js 파일에 각각 아래와 같이 정의한다면,

// child1.js
// 1)함수 export

export default myFood = (first, second) => {
	console.log(`나는 ${first}(이)가 들어간
    ${second}(을)를 제일 좋아해 `)
}

// child2.js
// 2) 클래스 export

import Api from '@/http'

class serviceModules {

  getList = async params =>
    await Api.get('test/lists', { params })

  registList = async params =>
    await Api.post('test/upload', params)
}

export default new serviceModules()

1,2 번과 같이 각각 한개의 모듈만 export가 가능하며

import문으로 가져와 사용할 수 있다.

export {values as default} 문은

여러개 내보낼 수 있으며 import할 때 export했던 이름과 동일한 이름을 사용해야 한다.

//child3.js

// 1)변수 export 

export let food = ['옥돔구이', '갈비탕', '생선회비빔밥']

// 2)함수 export
makeFoodList = () => {...}
showMyFood = () => {...}

export {makeFoodList, showMyFood}

---

import문

다른 모듈에서 내보낸 모듈을 바인딩 할 때 사용하며

export한 방법론에 따라 import구문(문법)이 달라진다.

export default values 문의 import

// 1) 함수 import

import foodLog from '@/child.js'

// 2-1) 클래스 import
import serviceModules from '@/child.js'

// 2-2) 클래스 import
import {getList, registList} from '@/child.js'

• import '함수명 재정의' 혹은 export했던 모듈명과 '동일하게' 명시 - export
• class의 경우, 모듈 내 함수명을 동일하게 명시

export {values as default} 문의 import

// 1) 변수 import

import food from '@/child3.js'

// 2) 함수 import
import {makeFoodList, showMyFood} from '@/child3.js'

• 무조건 export했던 모듈명과 '동일하게' 명시
• let, const 예약어 사용 가능(export default에서는 let, const 사용불가)

---

모듈의 import/export에서 live bindings라는 개념이 언급되는데 이는 두가지 export구문의 차이점과 연관이 있다.

Live bindings란,
ES modules에서 소개된 개념으로 exported된 value가 저장된 참조값의 주소를 의미한다.
export한 value값은 value를 import하는 모듈의 참조값으로부터 전달되며, 자바스크립트에서는 이러한 live bindings만이 참조하고 있는 변수를 전달할 수 있는 유일한 방법이다.

쉽게 말해 modules를

참고 사이트
MDN-export/import
Live Bindings - Difference Between Export Default and Export as Default