import / export

08/14

 

export

작성한 모듈을 외부로 내보내는 방법.

// 선언한 변수를 내보내기
export let var1 = 'variable';

// 두개 이상을 내보내기
let str1 = 'string';
let arr1 = ['item1', 'item2'];
export {str1, arr1};

// 특정 하나만 내보내기
export default str1;

두개 이상의 변수를 export default 할 경우, 이미 default가 존재한다는 SyntaxError가 발생한다.

 

import

export 를 통해 내보낸 것을 가져다 사용하는 방법.
import 로 스크립트를 불러 오고 나면 변수, 함수, class 는 read-only 상태이다.

(예시용 export.js)

let a = 10;
let b = 20;
export let c = 30;
let d = 40;

export {a, b};
export default d;

(예시용 export.js)

 

// export default 만을 사용했을 때
import 변수명 짓기 from '경로';

export default 만을 사용한 경우, 자유롭게 작명이 가능하다.
default 를 사용하면 기본적으로 그 변수만 export 하기 때문에, import 할 때도 그 변수가 확정으로 불러와지기 때문.

// 여러개를 export 했을 때
import {a, b, c} from '경로';

여러 개를 import 하는 경우, export 할 때와 같은 변수명을 사용해야 한다.

// export 와 export default 동시에 사용
import 변수명 짓기(=d), {a, b, c} from '경로';

동시에 사용 하는 경우, export default 한 항목을 먼저 작성 해야 한다.
하지만, 각각의 import 방식이 일관성 없이 혼용되어 있으면, 코드 파악에 어려움이 생길 수 있기 때문에
이런 방식은 지양하는 것이 좋다고 생각된다.

// as 를 사용해 변수명 바꾸기
import 변수명 짓기(=d), {a as 변수명1, b as 변수명2, c as 변수명3} from '경로';

// * 를 사용해 많은 변수에 대응
import 변수명 짓기(=d), * as 객체명 짓기 from '경로';
객체명 짓기.a
객체명 짓기.b
객체명 짓기.c

import 과정에서 as 를 사용해 변수 명을 바꿀 수 있다.
* 를 사용해 한번에 처리한 경우, 변수들이 새로 만들어진 객체에 담겨 기존의 변수명으로 사용할 수 있다.

 

( require )

require() 는 ES6 이전 NodeJS 전용으로 CommonJS 에서 사용하던 방식으로,
파라미터로 파일의 경로를 받아 외부 모듈을 가져올 수 있다.

let var1 = require('파일 경로');