JavaScript의 동적 임포트(Dynamic Import)는 모듈을 필요한 시점에 불러올 수 있게 해주는 강력한 기능입니다. 정적 import 문과 달리, 동적 임포트는 코드 실행 중에 조건부로 모듈을 로드할 수 있어 초기 페이지 로딩 속도를 개선하고 번들 크기를 줄이는 데 유용합니다.
동적 임포트란?
동적 임포트는 import() 함수 호출 형태로 사용하며, Promise를 반환합니다. 따라서 await 또는 .then()과 함께 사용할 수 있습니다. 버튼 클릭과 같은 사용자 이벤트가 발생했을 때 특정 모듈을 지연 로딩(lazy loading)하는 대표적인 패턴으로 활용됩니다.
예제 코드
다음은 버튼을 클릭하면 외부 모듈을 동적으로 가져와 결과를 화면에 표시하는 전체 예제입니다.
<!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의 동적 임포트</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>
위 버튼을 클릭하면 모듈이 동적으로 임포트됩니다.
</h3>
<script>
document.querySelector(".Btn").addEventListener("click", loadModule);
let resEle = document.querySelector(".result");
async function loadModule() {
let test = await import("./sample.js");
resEle.innerHTML += test.testImport() + "<br>";
resEle.innerHTML += test.tellTime();
}
</script>
</body>
</html>코드 설명
- 버튼 요소에 클릭 이벤트 리스너를 등록하여
loadModule함수를 호출합니다. loadModule은async함수로 선언되어 있으며, 내부에서await import("./sample.js")를 통해 모듈을 비동기적으로 불러옵니다.- 가져온 모듈 객체의
testImport()와tellTime()메서드를 호출하여 그 결과를.result영역에 출력합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'클릭하세요' 버튼을 누르면 모듈이 동적으로 로드되고, 아래와 같이 모듈에서 반환된 값이 화면에 표시됩니다.
동적 임포트의 장점
- 지연 로딩: 필요한 순간에만 모듈을 불러오므로 초기 로딩 시간이 단축됩니다.
- 조건부 로딩: 사용자 권한, 브라우저 환경 등 조건에 따라 다른 모듈을 선택적으로 로드할 수 있습니다.
- 코드 분할(Code Splitting): 웹팩(Webpack) 같은 번들러와 함께 사용하면 자동으로 코드 스플리팅이 적용되어 성능 최적화에 도움이 됩니다.