[JS] 동적으로 모듈을 import(dynamic import)하는 방법 : import() 사용

728x90

우리가 자주 사용하는 import ...from은 정적인 방식이며, 제약사항이 많다.

오늘은 제약사항과 import()의 사용법에 대해 정리하려고 한다.

기존 import의 제약사항

제약사항1

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

제약사항2

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

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

이런 제약사항이 생기게 된 건 import/export가 기본적으로 코드구조의 중심을 잡아주기 때문인데

그렇게 때문에 항상 최상위 레벨에서 import를 해야했다. ( 괄호안에 쓰면 에러남.. )

근데 항상 최상위에만 import하게 되면 다음과 같은 문제가 있다.

나는 특정조건에서만 모듈을 import해서 사용하고 싶어. 조건에 맞지 않는 경우에는 모듈을

사용하지도 않은데, import를 하면 리소스 낭비잖아?

이런 생각이 든다면 이제 import()를 쓰면 된다.

import()를 사용하는 방법

기본 사용법

const { 함수명 } = import('모듈명');

샘플코드

index.html

<!doctype html>
<script>
  async function load() {
    let say = await import('./say.js');
    say.hi(); // Hello!
    say.bye(); // Bye!
    say.default(); // Module loaded (export default)!
  }
</script>
<button onclick="load()">Click me</button>

say.js

export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}

export default function() {
  alert("Module loaded (export default)!");
}

여기서 say.js는 그냥 함수를 만들어 export하는 내용이니 넘어가고

index.html를 보면 import() 키워드를 사용해서 모듈을 import 하는 것을 확인할 수 있다.

여기서 눈 여겨 볼 게 2개 있다.

1. await을 사용한다.

2. 중괄호{} 안에서 사용할 수 있다.

여기서 조금 설명을 하고 넘어가도록 하겠다.

await을 사용하는 이유??

import를 하는데 굳이 왜 await을 사용해야 할까?

이건 import의 작동방식과 관련이 있는데 상세한 내용은 아래 링크를 참조하도록 하자.

[JS] import() 방식과 import ...from 방식의 차이점에 대한 이야기 :(feat. import시 undefined가 뜨는 현상)

간단히 설명하면 import()는 모듈이 로드되기 전에 import를 수행하고, Promise 객체를 리턴하기 때문에

모듈이 export된 후의 시점을 잡아 모듈을 import하기 위해 그렇다. ( 내 생각.. )

물론 await 말고, then을 사용할 수도 있다.

then을 사용한 샘플코드

index.html

<!doctype html>
<script>
  async function load() {
    import('./say.js').then((say)=>{
        say.hi(); // Hello!
        say.bye(); // Bye!
        say.default(); // Module loaded (export default)!
    });
  }
</script>
<button onclick="load()">Click me</button>

say.js

export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}

export default function() {
  alert("Module loaded (export default)!");
}

여기까지는 정적인 import이다. 이제 자신이 원하는 시점(동적)에서 import하는 방법을 알아보자.

예시는 if문으로 했지만 어떤 경우라도 가능하다.

조건에 따른 import()

이제 import()에 대한 기본적인 사용법을 알았다. 이건 그냥 if문과 import()문만 알면 할 수 있다.

조건에 맞으면 모듈을 import하고, 조건에 맞지 않으면 import하지 않음으로 리소스 낭비를 예방할 수 있다.

( 엄청 큰 프로젝트가 아니면 의미가 있을 지는 모르겠지만.. )

if문과 import() 샘플코드

<!DOCTYPE html>
<script>
  async function load() {
    import("./say.js").then((say) => {
      say.hi(); // Hello!
      say.bye(); // Bye!
      say.default(); // Module loaded (export default)!
    });
  }

  if(true){
    load()
  }else{
    console.log('모듈을 호출하지 않았습니다.')
  }
</script>