JavaScript에서 흔히 import를 하는 두 가지 방법이 있다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import vis from 'vis'; | |
| const nodes = new vis.DataSet(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { call } from 'redux-saga/effects'; | |
| function* fetchSomething(id) { | |
| try { | |
| const st = yield call(...); | |
| ... | |
| } catch (e) { | |
| ... | |
| } | |
| } |
전자는, export default로 된 것을, 선언한 변수 (위 예제에서 vis)로 가져온다. 실제로 export 될 때의 이름은 상관이 없다. 가져온 이름으로 사용하면 된다. 따라서 위 코드를 다음과 같이 바꿔도 똑같이 동작한다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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해오는 경우에 유용하게 쓰인다.