Dynamic import를 사용해 동적으로 모듈 가져오기

Dynamic import란?

import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다.

 

Dynamic import를 사용하는 이유

1. 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 가능성이 있다.

2. 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다.

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

※ 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다.

 

사용법

필요한 함수들을 정의하고, 필요한 곳에서 import하여 원하는 방식대로 적용해준다.

 

예시 코드

// someFn.js

export const greeting = () => {
  console.log("어서오시고");
};

export const importMe = () => {
  console.log("다이나믹 임포트를 해주세요");
};

export const easy = () => {
  console.log("쉽죠?");
};

export const add = (a, b) => console.log(a + b);

 

// use import()
export const DynamicImport = () => {
  // async / await 방식
  const loadGreeting = async () => {
    const DI = await import("./someFn.js");
    DI.greeting();
  };
  const loadImportMe = async () => {
    const DI = await import("./someFn.js");

    DI.importMe();
  };
  const loadEasy = async () => {
    const DI = await import("./someFn.js");
    DI.easy();
  };

  const loadAddAwait = async (a, b) => {
    const DI = await import("./someFn.js");
    return DI.add(a, b);
  };
  // 기본 방식
  const loadAdd = (a, b) => {
    const DI = import("./someFn.js")
      .then((module) => {
        module.add(a, b);
      })
      .catch((err) => err);
    return DI;
  };

  return (
    <div>
      <p>DynamicImport component</p>
      <button onClick={loadGreeting}>loadGreeting</button>
      <button onClick={loadImportMe}>loadImportMe</button>
      <button onClick={loadEasy}>loadEasy</button>
      <button onClick={() => loadAdd(1, 2)}>loadAdd</button>
      <button onClick={() => loadAddAwait(5, 5)}>loadAddAwait</button>
    </div>
  );
};

Promise를 반환하기 때문에 async/await을 통한 사용도 가능하다.

 

생성한 버튼들을 출력하면 아래과 같이 사용되는 것을 볼 수 있다.

참고사항 : Dynamic impot는 일반 스크립트에서도 동작하기 때문에 script type="module"이 없어도 된다.

 

주의사항

- import() 는 함수 호출과 문법이 유사해 보이지만 함수 호출이 아니다. super()처럼 괄호를 사용하는 특별한 문법 중 하나이다. 따라서 import를 변수에 복사하거나 call/apply 등의 사용은 불가능하다.

 

 

---

참조

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

import() - JavaScript | MDN

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

동적으로 모듈 가져오기