[Javascript] ES6 export, import

 

안녕하세요. 이번 포스팅은 export, import에 대해 알아보겠습니다.

 

ES6에서는 export, import를 사용하여 자바스크립트가 모듈화를 할 수 있는 기능을 제공합니다.

 

export는 두 가지 방법이 있다.

export default, (named)export

 

우선 export 예제를 보겠습니다.

// module1.js

export default function test() {
    console.log('module1 test');
}

export function test1() {
    console.log('module1 test1');
}

export function test2() {
    console.log('module1 test2');
}

이것을 아래와 같이 사용할 수도 있습니다.

// module1.js

function test() {
    console.log('module1 test');
}

function test1() {
    console.log('module1 test1');
}

function test2() {
    console.log('module1 test2');
}

export default test;
export {test1, test2};

 

export default와 export의 차이

main.js와 module1.js는 같은 경로에 위치한다고 가정하겠습니다.

export default로 내보낸 것은 하나의 변수로 받아서 사용할 수 있습니다.

// main.js
import test from './module1.js';

from에는 현재경로를 의미하는 것을 꼭 붙여야 작동됩니다.

module1.js에서 export default를 한 test를 test가 받아서 사용합니다.

 

사용할 변수는 이름을 원하는대로 지어도 됩니다.

// main.js
import f1 from './module1.js';

 

export는 내보낼 때 export 객체 형태로 내보냅니다. 객체형태이기 때문에 object destructuring을 활용하여 접근이 가능합니다.

// main.js
import {test1, test2} from './module1.js';

 

export로 내보내는 이름과 import하는 이름이 동일해야 합니다. 하지만, 별칭을 사용하면 원하는 이름도 가능합니다.

// main.js
import {test1 as t1, test2 as t2} from './module1.js';

 

그런데 만약 module1.js에 export로 내보내는 함수가 100개(test1, test2, ..., test100)라 가정해 보겠습니다.

그렇다면 위의 내용을 기반으로 본다면 다음과 같이 import를 해야 합니다.

// main.js
import {test1, test2, test3, ..., test100} from './module1.js';
또는
import {test1 as t1, test2 as t2, ..., test100 as t100} from './module1.js';

 

이러한 반복을 방지하기 위해 다음과 같은 문법을 사용할 수 있습니다.

// main.js
import * as module1 from './module1.js';

// 호출하는 방법
module1.test1();
module1.test50();
module1.test100();