더북(TheBook)

dynamic.mjs

const a = false;
if (a) {
    import './func.mjs';
}
console.log('성공');

콘솔

$ node dynamic.mjs
file:///C:/Users/speak/WebstormProjects/nodejs-book/ch3/3.3/dynamic.mjs:3
    import './func.mjs';
           ^^^^^^^^^^^^

SyntaxError: Unexpected string

하지만 ES 모듈은 if문 안에서 import하는 것이 불가능합니다. 이럴 때 다이내믹 임포트를 사용합니다. dynamic.mjs를 다음과 같이 수정해봅시다.

dynamic.mjs

const a = true;
if (a) {
    const m1 = await import('./func.mjs');
    console.log(m1);
    const m2 = await import('./var.mjs');
    console.log(m2);
}

콘솔

$ node dynamic.mjs
[Module: null prototype] { default: [Function: checkOddOrEven] }
[Module: null prototype] { even: 'MJS 짝수입니다', odd: 'MJS 홀수입니다' }

import라는 함수를 사용해서 모듈을 동적으로 불러올 수 있습니다. importPromise를 반환하기에 await이나 then을 붙여야 합니다. 위 코드에서는 async 함수를 사용하지 않았는데, ES 모듈의 최상위 스코프에서는 async 함수 없이도 await할 수 있습니다. CommonJS 모듈에서는 안 됩니다.

결괏값도 눈여겨볼 필요가 있습니다. export default의 경우 import할 때도 default라는 속성 이름으로 import됩니다. 참고로 CommonJS 모듈에서 module.exports한 것도 default라는 이름으로 import됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.