본문 바로가기
Programming/JavaScript

Javascript - 동적으로 모듈 가져오기 import()

by Muko 2020. 6. 24.

동적으로 모듈 가져오기

Javascript에서 어떤 모듈을 가져오고 내보낼 때 전에는 require 를 사용, 그 이후에는 import와 export를 사용하고 있다. 하지만 이러한 방법은 정적인 방식이기 때문에 문법이 단순하지만 제약사항이 존재한다.

  • import 문에 동적 매개변수 사용할 수 없음. 원시 문자열만 가능하기 때문에 함수 호출 결과값을 경로로 사용 불가.
  • 런타임이나 조건부로 모듈 불러올 수 없음 - if문, 코드 블록 안에서 사용 불가능

이런 제약사항들은 import / export 가 코드의 중심을 잡아주는 역할을 하기에 존재한다. 코드 구조를 분석해서 모듈을 번들링하고, 사용하지 않는 모듈이 있을 경우에는 가지치기가 필요한데, 코드에서 고정되어있을 때 이런 작업이 쉽게 가능하다.

import() 표현식

import(module) 표현식은 모듈을 읽고 내보내는 모든 것을 포함하는 객체를 담고 있는 Promise 를 반환한다. 호출은 어디서든지 가능하다.

let modulePath = prompt("Which one do you want to read?");

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

// 혹은
let module = await import(modulePath);

예시

  • 모듈 say.js
export function hi() {
  console.log('hi');
}

export function bye() {
  console.log('bye');
}
  • 불러오기
const {hi, bye} = await import('./say.js');

hi(); // hi
bye(); // bye
  • default export 추가
// say.js
export default function() {
  console.log('export default 모듈');
}
  • 불러오기
// const {default: say} = await import('./say.js');
const obj = await import('./say.js');
const say = obj.default;

say();

주의

  • 동적 import는 일반 스크립트에서도 동작한다. script type="module" 이 없어도 된다.
  • import() 는 함수 호출과 문법이 유사해보이지만 함수 호출이 아니다. super() 처럼 괄호를 쓰는 특별한 문법 중 하나이다. 따라서 import를 변수에 복사하거나 call / apply를 사용할 수 없다.

댓글0