Dynamic import(동적 가져오기)

이미지 출처

보통 우리가 사용하는 import와 export는 모두 정적인 방식이며, 문법이 단순하고 제약사항이 있다.

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

모듈 경로에는 원시 문자열만 들어갈 수 있기 때문에 함수 호출 결과값을 경로로 쓰는 것이 불가능하다.

 import ... from getModuleName(); // 에러 발생 / 문자열만 허용 

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

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

그렇다면 왜 이런 제약사항이 있는 것일까?

Import / export는 코드 구조의 중심을 잡아주는 역할이기 때문이다.

코드 구조를 분석해 모듈을 한데 모아 번들링하고, 사용하지 않는 모듈은 제거해야 하는데,
코드 구조가 간단하고 고정되어 있을 때에만 위와 같은 역할을 할 수 있다.

동적 가져오기의 장점

• 동적 가져오기를 사용하면 import문에 변수 설정을 할 수 있다.
• 필요한 경우에만 사용할 수 있다.
  -async/await 사용하여 동적으로 모듈을 가져오는 것을 통해, 불필요한 리소스 사용을 줄일 수 있다.
  - 코드의 가독성과 유지보수의 편의성
  • 불필요한 리소스를 줄이는 것보다 큰 기대효과를 가진다.
  • 정적 import를 사용했더라면, 필요한 모듈들을 전부 import문을 사용해서 가져와야 할 것이고, 간단해야 할 최상단 import코드가 굉장히 길어지고 복잡해질 것이다.
  • 만약 API를 하나 더 추가해야하는 상황이라면, 또 최상단의 import코드만 길어질 뿐이다. 하지만 동적 import를 사용한다면 설정값만 변경하면 되기 때문에 효울적으로 코드를 짤 수 있다.
    (import 경로에 함수 호출 결과값을 사용할 수 있기 때문)

동적 import를 사용하는 방법

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

then, catch 사용 가능

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

async, await 사용 가능(시간이 걸리는 작업이기 때문에 사용, 변수설정)

    let module = await import(modulePath)

export default 사용하는 경우

// say.js 파일에 export default 모듈 추가
    export default function () { 
        alert(...)
    }

export default한 모듈을 사용하려면, 아래와 같이 객체의 default 프로퍼티를 사용하면 된다!

    const obj = await import('./say.js');
    const say = obj.default;
    
    say();

출처
JSINFO