JS 또는 Vue를 개발하다보면 import/export를 많이 보시거나 사용 하 실 것입니다. 이것이 정확하게 어떻게 작동을하고 무엇을 의미하는지 모르고 쓰시는 경우가 많습니다. 그래서 이러한 내용을 간단하게 알아 보고자 합니다.
대부분의 서비스는 각 기능별로 나누어서 작업하고 이러한 기능들이 모아서 하나의 서비스를 동작시키도록 되어있습니다. 이러한 각 기능별로 나누어진것을 모듈이라고 생각 하시면 됩니다. 이렇게 나누어진 모듈 또는 라이브러리를 다른 쪽에서 가져다 사용하고 싶다면 어떻게 해야 할까요? es5에서는 외부 모듈들을 가져다 사용하느것이 매끄럽지 못했습니다. 하지만 es6로 넘어 오면서 import/export를 통해서 좀더 쉽게 가져다 사용하는 것이 가능 해 졌습니다. 그렇다면 어떻게 사용 하는지 를 알아봐야 겠죠?
export란?
export는 쉽게 설명하자면 내가 만든 모듈의 함수, 객체, 변수를 다른 모듈에서 가져다 사용 할 수 있도록 내보낼 때 사용합니다
// 변수로 선언한 것을 내보낸다.
export let myVariable = 'poooney';// 두개이상을 내보낼때는 { } 로 묶어서 export 하면됩니다.
let myVar = 'pooney'
let myVarArray = ['안녕하세요','pooney입니다.']
export {myVar,myVarArray};
export만 있는것도 있지만 export default가 붙어 있는 것도 많이 보셨을 것이니다. default의 의미는 특정 하나만 내보낸다 라고 생각하시면 됩니다.
// 특정 하나만 내보낼수 있습니다.
let myVar = 'pooney'
let myVarArray = ['안녕하세요','pooney입니다.']
export default myVar;
만약 아래와 같이 두개변수를 export default 할 경우 할 경우 아래와 같은 이미 벌써 defaylt가 존재한다는 에러가 발생하니 주의하셔야 합니다.
let myVar = 'pooney'
let myVarArray = ['안녕하세요','pooney입니다.']
export default myVar;
export default myVarArray;Uncaught SyntaxError: Identifier '.default' has already been declared
내보내는것을 알았다면 이제는 가져다 사용하는 방법을 알아 보겠습니다.
import란?
import는 export를 통해 내보내 진것을 가져다 사용한다라고 보시면 됩니다. 이때 export를 어떻게 하냐에 따라 import 선언 방법이 달라지는데 우선 일반적인 export를 했을 경우를 먼저 알아 보겠습니다.
basic.js
let myVar = 'pooney'
let myVarArray = ['안녕하세요','pooney입니다.']
export {myVar};
export {myVarArray};
// export를 아래와 같이 하나로 묶어서 사용 할 수 있습니다.
export {myVar,myVarArray};
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<script type=module>
//import {내보내진 변수 이름} from '모듈경로'
import {myVar, myVarArray} from "./basic.js"
console.log(`[myVar]: ${myVar}`) //출력: [myVar]: pooney
console.log(`[myVarArray]: ${myVarArray}`) //출력: [myVarArray]: 안녕하세요,pooney입니다.
</script>
</body>
</html>
import에서 유의깊게 보셔야 할 것은 {} 입니다. export를 통해 내보내질때 사용한 변수명이 들어가게 됩니다. 하지만 export default를 통해 내보내어 진 경우는 {}없이 import를 한 쪽에서 사용할 변수명이 사용됩니다.
export default를 사용 한 경우
basic.js
let myVar = 'pooney'
let myVarArray = ['안녕하세요','pooney입니다.']
export default myVar;
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<script type=module>
// import 사용할 변수명 from '모듈경로'
import newMyVar from "./basic.js"
console.log(`[newMyVar]: ${newMyVar}`) //출력: [newMyVar]: pooney
</script>
</body>
</html>
export default를 사용한경우 export와 달리 import 뒤에 해당 script에서 사용할 변수명을 입력하시면 됩니다. export를 통해 내보내진경우 import {myVar, myVarArray}를 사용하여 export의 변수명과 일치 시켰지만, export default를 통해 내보내진경우 import newMyVar 처럼 자신이 원하는 변수명을 입력한다는게 가장 큰 차이점입니다. 서로 다른이유는 export의 경우 여러개를 내보낼 수 있어 import 부분에 누구를 가져와야 할지 몰라 직접 매핑을 해야하지만 export default는 하나만 내보낼 수 있고 특정 하나만 import를 해면 되기 때문에 자신이 원하는 변수명에 담을 수 있는 것입니다.
그렇다면 저희는 이것을 혼용해서 써도 되는가?
저는 No! 라고 말씀드리고 싶습니다. 그 이유는 각각의 import방식이 일관성없이 제각각 다르면 서비스구성에 혼란과 해당 코드의 파악을 하기 어렵기 만들기 때문입니다. 때문에 하나의 방식으로 일관성있게 개발하는 것이 가독성과 서비스 구성에 효율적이라고 생각합니다.
이렇게 import/export에 대해서 알아 봤는데 잘못된 점은 댓글로 알려주시기 바랍니다. 감사합니다.
참고로 저는 아파치를 통해 해당 내용을 구성했습니다. export / import를 웹서버 구성없이 동작시킬경우 동작을 하지 않기 떄문에 이점은 참고 부탁드립니다.
