import 키워드

Parker.Park·2022년 9월 10일

개념

목록 보기

16/16

import 키워드

Javascript에서 현재 js파일에서 다른 export된 모듈을 가져오기 위해서 사용한다. 주로 라이브러리를 가져올 때 사용했기 때문에 Docs에서 getting started에서 참고하여 여과없이 사용하였다.

import 는 ES6에서 새롭게 도입된 키워드라고 한다. 이 외에도 from, export, default 와 같이 모듈 관리 전용 키워드가 있어서 가독성이 좋고, 비동기 방식으로 작동하기 때문에 실제로 쓰이는 부분만 불러와 성능과 메모리 부분에서 유리한 측면이 있다고 한다.

import 키워드를 어떻게 export와 사용하는지에 대해서 정리해보자.

Named import

import { export1 } from "module-name";

"module-name"에서 가저올 모듈을 절대경로 혹은 상대결로를 표시하는 곳이다. ""따옴표안에서 결정하며 확장자를 쓸경우도 있으니 확인하여야한다. "export1" 하나의 멤버를 가리킨다. 만약 "module-name"에서 추가적으로 멤버를 불러오고 싶다면 "export2, export3..."이 될 수 있다.

import { export1 as alias1 } from "module-name";

가져온 멤버에 별칭을 주어 별칭으로 사용 할 수 있다.

// export-test.mjs

export function fn1() {
  const export1 = "export1";
  console.log(export1);
}

export function fn2() {
  const export2 = "export2";
  console.log(export2);
}

export function fn3() {
  const export3 = "export3";
  console.log(export3);
}

// import-test.mjs

import { fn1, fn2, fn3 as fnThree } from "./export-test.mjs";

fn1(); //"export1"
fn2(); //"export2"
fnThree(); //"export3"

Namespace import

import * as name from "module-name";

가져온 모든 모듈에 대해서 "name"으로 바인딩되어 들어가게 할 수 있다. "module-name"에서 모든 exports된 모듈을 "name"을 통해서 오브젝트의 properties처럼 기능을 사용할 수 있다.

// export-test.mjs

function fn1() {
  const export1 = "export1";
  console.log(export1);
}

export function fn2() {
  const export2 = "export2";
  console.log(export2);
}

export function fn3() {
  const export3 = "export3";
  console.log(export3);
}

// import-test.mjs

import * as Fn from "./export-test.mjs"

// Fn.fn1(); //TypeError!
Fn.fn2(); //"export2"
Fn.fn3(); //"export3"

Default import

import defaultExport from "module-name";

"default export"를 통해 내보낸 것을 기본값으로 가져올 수 있다. (=보내는 방식에 따라 불러오는 방식이 차이가 나는 이유였다.)

// export-test.mjs

function fn1() {
  const export1 = "export1";
  console.log(export1);
}

//fn2, fn3만 보낼 것이다.
export default {
  fn2() {
    const export2 = "export2";
    console.log(export2);
  },

  fn3() {
    const export3 = "export3";
    console.log(export3);
  },
};

// import-test.mjs

import Fn from "./export-test.mjs";

// Fn.fn1(); // TypeError
Fn.fn2(); //"export2"
Fn.fn3(); //"export3"

파일단위로 ES 모듈 적용

원래 기존 CommonJS모듈에서 ES모듈인 import, export를 사용하려면 Babel이라는 트랜스파일러를 사용하여야 한다. Node.js 13.2버전부터 ES모듈 시스템을 정식 지원하게 되었다고 한다. 이에 따라 다른 도구 없이 손쉽게 ES모듈을 사용할 수 있게 되었다고 한다.
사용법에 대해서 간단하게나마 정리해보자.

초반에 import키워드를 사용할 때 가장 먼저 아래와 같이 에러 메시지를 받을 가능성이 높을 것이다.

(node:84825) Warning: 
To load an ES module, set "type": 
"module" in the package.json or use the .mjs extension.

이를 해결할 첫번째 방법은 간단하게 파일 단위로 확장자를 js대신 mjs를 사용하는 것이라고 한다. Node.js에서 프로젝트 내부 모듈을 불러올 때는 반드시 확장자까지 포함해줘야 한다. 이는 브라우저에서 import가 작동하는 방식과 맞춰주기 위해 의도적으로 설계된 부분이라고 하니 참고 바란다.