2015년 ES6문법이 도입되면서 javascript에서도 모듈을 가지고 올 수 있는
import와 export가 생겼다.
import를 할 때 아래와 같은 2가지의 방식이 있는데
1. import()
2. import ...from
이 친구들 똑같이 모듈을 import하지만 작동방식이 다르다. 오늘은 그 작동방식에 대해 정리해보려 한다.(간단히)
import ...from의 작동방식
import하기전에 모듈들을 미리 로드 해놓고 import를 수행함
import.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module">
import { temp } from "./import.js";
console.log(temp); //temp입니다.
</script>
</head>
<body></body>
</html>
import.js
const temp = "temp입니다.";
export { temp };
결과
결과를 보면 temp에 모듈에서 export한 temp변수가 제대로 들어온 것을 확인할 수 있다.
그리고 눈 여겨봐야 할 점은 좌측의 소스를 보면 import.js를 제대로 로드한 것을 확인 할 수 있다.
import()의 작동방식
모듈이 로드되기 전에 import를 수행함
import.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module">
let { temp } = import("./import.js");
console.log(temp); //undefined
</script>
</head>
<body></body>
</html>
import.js
const temp = "temp입니다.";
export { temp };
결과
결과는 temp가 undefined이 뜬다.. 왜 그런걸까?
여기서 눈 여겨봐야 할 점은 분명 import() 구문을 지나 console.log() 구문까지 왔는데도
import.js가 로드 되지 않은 것을 확인 할 수 있다.
결론
import ...from은 모듈이 전부 로드 된 후에 import를 수행하기 때문에 await 또는 then 구분을 사용하지 않고도
정상적으로 모듈을 import 해올 수 있지만
import()는 모듈이 로드 되기전에 import를 수행하기 때문에 await 또는 then 키워드를 사용하여
import해야 사용자가 원하는 결과값을 얻을 수 있다.
* 단 node환경에서 import ...from 또한 소스가 꼬이면(모듈이 initialized 되기전) 정상적으로 import 해올 수 없는 상황이
있기 때문에 그런 경우에는 await import()를 사용하면 문제를 해결할 수 있다.
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JS] nullish 병합연산자 '??'에 대한 설명 및 사용방법 ( feat. OR연산자와 비교 ) (0) | 2023.11.25 |
|---|---|
| [JS] 동적으로 모듈을 import(dynamic import)하는 방법 : import() 사용 (0) | 2023.11.24 |
| [JS] ES6에서 import를 했는데 undefined값을 읽는 문제에 관한 이야기 (0) | 2023.11.23 |
| [JS] html2canvas + jspdf 조합으로 HTML에서 원하는 영역을 PDF로 변환해보자. (0) | 2023.11.13 |
| [JS] Vue 컴포넌트의 내용을 인쇄하는 기능을 구현하며 생겼던 문제와 원인에 대한 정리 (0) | 2023.11.11 |
