JavaScript의 동적 임포트(dynamic import)는 필요한 시점에 모듈을 불러올 수 있게 해주는 강력한 기능입니다. import() 함수는 Promise를 반환하기 때문에 await 키워드와 함께 사용하면 비동기 코드를 더욱 깔끔하게 작성할 수 있습니다.
참고 − 이 예제를 실행하려면 로컬호스트(localhost) 서버가 필요합니다. ES 모듈은 file:// 프로토콜에서는 CORS 정책 때문에 정상적으로 작동하지 않으므로, VS Code의 Live Server 확장이나 Python의 http.server 등을 활용해 로컬 서버 환경에서 실행해 주세요.
JavaScript 동적 임포트 예제
아래는 버튼 클릭 시 sample.js 모듈을 동적으로 불러와 결과를 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript에서 동적 임포트 await 사용하기</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 모듈이 동적으로 임포트됩니다</h3>
<script>
document.querySelector(".Btn").addEventListener("click", loadModule);
let resEle = document.querySelector(".result");
async function loadModule() {
// import()는 Promise를 반환하므로 await로 모듈을 기다릴 수 있습니다
let test = await import("./sample.js");
resEle.innerHTML += test.testImport() + "<br>";
resEle.innerHTML += test.tellTime();
}
</script>
</body>
</html>sample.js
동적으로 불러올 모듈 파일입니다. export 문을 통해 두 개의 함수를 외부로 내보내고 있습니다.
function testImport() {
return "Module testImport has been imported" + "<br>";
}
function tellTime() {
return new Date();
}
export { testImport, tellTime };실행 결과
페이지가 처음 로드된 상태입니다.
'CLICK HERE' 버튼을 클릭하면 sample.js 모듈이 동적으로 불러와지고, 모듈 내 testImport() 함수가 반환한 메시지와 tellTime() 함수가 반환한 현재 시간이 화면에 출력됩니다.
핵심 포인트 정리
- 동적 임포트란? 페이지 초기 로딩 시 모든 모듈을 불러오지 않고, 사용자 상호작용 등 특정 조건에서 필요한 모듈만 나중에 불러오는 방식입니다.
- Promise 반환:
import()호출은 Promise를 반환하므로.then()체인 대신async/await문법으로 직관적으로 처리할 수 있습니다. - 성능 최적화: 초기 번들 크기를 줄여 페이지 로딩 속도를 개선하는 코드 스플리팅(code splitting)에 널리 활용됩니다.