[Javascript] es6 import, export 예시

💡 우리는 import, export를 통해 다른 js파일에 정의된 함수, 변수등을 가져와 사용할 수 있다. 

그때 사용되는 import와 export에 대해 알아보고자 한다.

---

 

※ 참고사항)  node 환경에서 module의 import, export를 test하고자 한다면 반드시 package.json에서 하단과 같은 옵션을 설정해야 됩니다. 

"type": "module"

 

본격적으로 import와 export의 사용 예제를 확인해보자!

 

예시 1)

// b.js
function f1(){ console.log("f1 호출") }
let variable = "variable"

export {variable, f1}

 

//a.js
import {variable, f1} from './b.js'

console.log(variable); // variable
f1(); // f1 호출

b.js 에서 우리는 f1이라는 함수와 variable이라는 변수를 정의했고 이를 a.js에서 import해서 사용해봤습니다. 

 

 

예시 2)

//c.js
function f2(){
    console.log("f2호출")
}
export default f2;

 

//a.js
import f2 from './c.js'
f2(); // f2 호출

 

c.js 에서 우리는 f2라는 함수를 정의했고 이를 a.js에서 import해서 사용해봤습니다. 

 

※ 예시1에서 export { 내보낼 함수 or 변수 } 와 달리 export default 내보낼 함수 이렇게 했는데요. default는 export 할 객체가 하나일 때만 쓸수 있고 import할 때도 { } 를 할 필요가 없고 이름 import할 때 이름도 마음대로 지어 됩니다. 

 

여기까지 간단한 예시 2가지를 설명 했는데요... 이 외에도 as나 * 등을 이용해 import, export를 더 편하게 사용할 수 있는데요. 개인적인 의견으로는 1번과 같은 형식으로 사용하는 것이 좋은 것 같습니다. 

 

import와 export에 대해 더 알고 싶으시면 하단을 참고해주세요.

참고 ) https://ko.javascript.info/import-export