JavaScript에서 흔히 import를 하는 두 가지 방법이 있다.
| import vis from 'vis'; | |
| const nodes = new vis.DataSet(); |
| import { call } from 'redux-saga/effects'; | |
| function* fetchSomething(id) { | |
| try { | |
| const st = yield call(...); | |
| ... | |
| } catch (e) { | |
| ... | |
| } | |
| } |
전자는, export default로 된 것을, 선언한 변수 (위 예제에서 vis)로 가져온다. 실제로 export 될 때의 이름은 상관이 없다. 가져온 이름으로 사용하면 된다. 따라서 위 코드를 다음과 같이 바꿔도 똑같이 동작한다.
| import olaf from 'vis'; | |
| const nodes = new olaf.DataSet(); |
후자의 { 를 쓰는 import는 export function call(...) { ... }, export const call = function(...) { ... } 등의 방법으로 땡겨오는 것이며, 이렇게 export된 변수명 그대로 import 해주어야 한다.
만약에 소스에서 선언된 것과 다른 변수로 바인딩하고 싶다면 import { call as c } from 'redux-saga/effect';와 같이 선언할 수도 있다. 이 예제에서는 짧은 변수라서 굳이 더 줄일 필요가 없었지만 굉장히 긴 멤버를 import해오는 경우에 유용하게 쓰인다.