모던 JS: import와 export

Source: Dev.to

이 글은 원래 bmf-tech.com에 게재되었습니다.
※Innovator Japan Engineers’ Blog에서 재게시한 내용입니다.

export란

export는 파일에서 함수, 변수, 객체, 클래스 등을 외부에서 import 할 수 있도록 노출시키는 문법입니다.

명명된 export

내보낼 요소들의 이름을 명시적으로 지정합니다.

export { fooFunction };

export { fooFunction, barFunction, /* … */ };

export const foo = 'bar';

export let foo, bar, /* … */;

export class Foo { /* … */ }

기본 export

모듈에서 하나의 “기본” 값을 내보내고 싶을 때 default 키워드를 사용합니다.

export default function fooFunction() { /* … */ }

export default class Bar { /* … */ }

Note: var, let, const는 export default와 함께 사용할 수 없습니다.

import란

import는 다른 파일에서 export된 함수, 변수, 객체 등을 불러옵니다.

import { foo } from "Foo";
import { foo, bar } from "FooBar";
import { foo as bar } from "Foo";               // 별칭
import { foo as bar, bar as foo } from "FooBar";
import "FooBar";                                 // 부수 효과만을 위한 import

불러온 바인딩은 현재(로컬) 스코프에서 사용할 수 있습니다.

export default로 정의된 기본 요소를 import하는 방법

기본 export를 직접 import합니다:

import fooDefault from "Bar";

같은 모듈에서 명명된 export도 필요하다면, 기본 import 뒤에 나열합니다:

import fooDefault, { foo, bar } from "FooBar";

클래스의 export / import 예시

명명된 클래스와 기본 클래스를 export하기

export.js

export class Foo {
  fooFunction() {
    return 'foo';
  }
}

export default class Bar {
  barFunction() {
    return 'bar';
  }
}

import.js

import { Foo } from './export';   // 명명된 import
import Bar from './export';       // 기본 import

const objFoo = new Foo();
const objBar = new Bar();

console.log(objFoo.fooFunction()); // foo
console.log(objBar.barFunction()); // bar

인스턴스를 생성하는 팩토리 함수를 export하기

export.js

class Foo {
  fooFunction() {
    return 'foo';
  }
}

function createFoo() {
  return new Foo();
}

export default createFoo;

import.js

import createFoo from './export';

const fooInstance = createFoo();
console.log(fooInstance.fooFunction()); // foo

요약

export와 import 사양을 이해하는 것은 Vue.js, React와 같은 최신 프레임워크에서 매우 중요합니다.

참고 자료

• MDN – Export
• MDN – Import