[javascript] 동적 모듈 가져오기(import)

보통 export문이나 import문은 '정적인' 방식입이다. 문법이 단순하고 제약사항이 있다.

제약사항

 

1.import문에 동적 매개변수를 사용할 수 없다.

import ... from getModuleName(); // 모듈 경로는 문자열만 허용되기 때문에 에러가 발생합니다.

2. 런타임이나 조건부로 모듈을 불러올 수 없다

if(...) {
  import ...; // 모듈을 조건부로 불러올 수 없으므로 에러 발생
}

{
  import ...; // import 문은 블록 안에 올 수 없으므로 에러 발생
}

 

이런 제약사항이 만들어진 이유는 import/export는 코드 구조의 중심을 잡아주는 역할을 하기 때문입니다. 코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거(가지치기)해야 하는데, 코드 구조가 간단하고 고정되어있을 때만 이런 작업이 가능합니다.

그럼에도 불구하고 모듈을 동적으로 불러와야 한다면 어떻게 해야 할까요?

import()표현식

import(module) 표현식은 모듈을 읽고 이 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 프라미스를 반환합니다. 호출은 어디서나 가능합니다.

코드 내 어디에서 동적으로 사용할 수도 있습니다.

import() 예시1

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

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

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

hi();
bye();

import() 예시2

// 📁 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();

주의사항

동적 import는 일반 스크립트에서도 동작합니다. script type="module"가 없어도 됩니다.

import()는 함수 호출과 문법이 유사해 보이긴 하지만 함수 호출은 아닙니다. super()처럼 괄호를 쓰는 특별한 문법 중 하나입니다.

따라서 import를 변수에 복사한다거나 call/apply를 사용하는 것이 불가능합니다. 함수가 아니기 때문이죠.

https://ko.javascript.info/modules-dynamic-imports

동적으로 모듈 가져오기