ES6 모듈 및 JavaScript에서 가져오기 및 내보내기를 사용하는 방법

ES2015(ES6)를 사용하면 JavaScript의 모듈에 대한 기본 제공 지원을 받을 수 있습니다. CommonJS와 마찬가지로 각 파일은 자체 모듈입니다. 개체, 함수, 클래스 또는 변수를 외부 세계에서 사용할 수 있도록 하려면 내보내기를 한 다음 필요할 때 다른 파일에서 가져오기만 하면 됩니다. Angular 2는 ES6 모듈을 많이 사용하므로 Angular에서 작업한 사람들에게는 구문이 매우 친숙할 것입니다. 구문은 매우 간단합니다.

수출

구성원을 하나씩 내보낼 수 있습니다. 내보내지 않은 항목은 모듈 외부에서 직접 사용할 수 없습니다.

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

또는 모듈 끝에서 단일 명령문으로 원하는 구성원을 내보낼 수 있습니다.

export { myNumbers, myLogger, Alligator };

별칭으로 내보내기

as 키워드를 사용하여 내보낸 멤버에 별칭을 지정할 수도 있습니다.

export { myNumbers, myLogger as Logger, Alligator }

기본 내보내기

default 키워드를 사용하여 기본 내보내기를 정의할 수 있습니다.

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];

export default function myLogger() {
  console.log(myNumbers, pets);
}

export class Alligator {
  constructor() {
    // ...
  }
}

가져오기

가져오기도 매우 간단합니다. import 키워드를 사용하면 중괄호로 멤버를 가져온 다음 현재 파일과 관련된 모듈의 위치를 알 수 있습니다.

import { myLogger, Alligator } from 'app.js';

별칭으로 가져오기

가져올 때 구성원에 별칭을 지정할 수도 있습니다.

import myLogger as Logger from 'app.js';

내보낸 모든 멤버 가져오기

다음과 같이 모듈에서 가져온 모든 항목을 가져올 수 있습니다.

import * as Utils from 'app.js';

이렇게 하면 점 표기법으로 멤버에 액세스할 수 있습니다.

Utils.myLogger();

기본 멤버가 있는 모듈 가져오기

선택한 이름을 지정하여 기본 구성원을 가져옵니다. 다음 예에서 Logger는 가져온 기본 구성원에 지정된 이름입니다.

import Logger from 'app.js';

기본 멤버 위에 기본이 아닌 멤버를 가져오는 방법은 다음과 같습니다.

import Logger, { Alligator, myNumbers } from 'app.js';