JavaScript에서 ES 모듈 동적 임포트

ES 모듈은 동적으로 임포트할 수 있습니다. 이 기능은 때때로 유용할 수 있습니다. 어떻게 하는지 살펴보겠습니다. 다음과 같은 모듈이 있다고 가정해 보겠습니다:

export function func1() {
	return '1'
}
export function func2() {
	return '2'
}
export default function() {
	return 'text';
};

이 모듈을 즉시가 아니라 특정 이벤트, 예를 들어 버튼 클릭 시에 임포트하고 싶다고 가정해 봅시다:

btn.addEventListener('click', function() {
	
});

import 명령을 사용하여 모듈을 임포트합니다:

btn.addEventListener('click', function() {
	import('./test.js');
});

import 명령은 결과로 프로미스를 반환합니다:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		
	});
});

콜백 변수에는 내보낸 함수들이 포함된 객체가 전달됩니다:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		let res1 = mod.func1();
		let res2 = mod.func2();
		
		console.log(res1, res2);
	});
});

기본값으로 내보내진 것은 default 키에 저장됩니다:

btn.addEventListener('click', function() {
	import('./test.js').then(mod => {
		let dfn = mod.default;
		console.log(dfn);
	});
});

임포트 시 구조 분해 할당을 사용할 수 있습니다:

btn.addEventListener('click', function() {
	import('./test.js').then(({func1, func2}) => {
		let res1 = func1();
		let res2 = func2();
		
		console.log(res1, res2);
	});
});

요일 이름 배열을 내보내는 모듈을 만드세요. 버튼을 클릭하면 이 모듈을 임포트하고 요일들을 ul 목록으로 출력하세요.