[JS] 모듈 export, import 사용하기

export

모듈 내의 식별자를 다른 모듈에서 접근하기 위해선 export 키워드를 통해 내보내기 한다.

내보내는 대상은 함수, 변수, 클래스 모두 가능하다.

반드시 모듈의 최상위 위치해야 한다.

 

import

타 모듈에서 내보낸 식별자들을 가져오기 위해선 Import 키워드를 사용한다.

가져올 식별자와 타 모듈의 경로를 함께 작성한다.

반드시 파일의 최상위에 위치해야 한다.

 

---

named exports

개별 식별자를 내보내는 것을 의미한다.

중괄호({})로 식별자들을 감싸 export, import를 사용한다.

 

// a.js
const a = 1;
function foo(){
	// ...
}

export { a, foo };

// b.js
import { a, foo } from './a.js';

console.log(a); // 1

 

as

as 키워드를 통해 모듈이 내보낸 식별자들을 하나의 이름으로 한 번에 가져올 수 있다.

물론 내보낼 때도 똑같이 사용 가능하다.

// b.js

import * as A from './a.js';

console.log(A.a);

위의 a.js 파일에서 내보낸 식별자들은 as 키워드 뒤에 지정한 객체의 프로퍼티로 할당된다.

A라는 이름으로 지정해 가져온 것이다.

 

default export

named exports와 다르게 모듈에서 하나만 정의한다.

가져올 때에도 중괄호 없이 임의로 지정한 이름으로 가져올 수 있다.

// a.js
function foo(){
	// ...
}

export default foo;

// b.js

import bar from './a.js';

foo라는 함수를 b에서는 bar라는 이름으로 가져온 것이다.