모던 자바스크립트 (모듈) 12-3. 동적으로 모듈 가져오기

동적으로 모듈 가져오기

- 정적인 방식인 export 및 import를 이용할 경우 제약사항이 있음

: import 문에 동적 매개변수를 사용할 수 없음

: 런타임이나 조건부로 모듈을 불러올 수 없음

 

 

 

import () 표현식

: 모듈을 읽고 이 모듈이 내보내는 모두 포함하는 객체를 담은 이행된 프라미스를 반환하는 방식

: 코드 내 어디에서나 동적으로 사용 가능

let modulePath = prompt("어떤 모듈을 불러오고 싶으세요?");

import(modulePath)
  .then(obj => <모듈 객체>)
  .catch(err => <로딩 에러, e.g. 해당하는 모듈이 없는 경우>)

 

- let module = await import(modulePath) 방식 사용

// 📁 say.js
export function hi() {
  alert(`안녕하세요.`);
}

export function bye() {
  alert(`안녕히 가세요.`);
}

let {hi, bye} = await import('./say.js');

hi();
bye();

 

- default export 모듈 사용

// 📁 say.js
export default function() {
  alert("export default한 모듈을 불러왔습니다!");
}

let obj = await import('./say.js');
let say = obj.default;
// 위 두 줄을 let {default: say} = await import('./say.js'); 같이 한 줄로 줄일 수 있습니다.

say();

 

 

 

 

 

 

Refference

동적으로 모듈 가져오기