JavaScript의 Module에 대해 간략하게 알아보기(import, export)

ES2015부터 표준으로 등재된 모듈은 import, export 등으로 코드를 모듈 단위로 관리하고, 사용할 수 있게 해 주고 있습니다.

• import 는 다른 파일(모듈)로부터 원하는 함수나 클래스, 변수 등을 가져올 때 사용한다.

• export는 함수나 클래스, 변수 등을 다른 곳에서 쓸 수 있도록 내보내기 하는 기능이다.

기본적으로 import 문 옆에는 가져올 함수나 클래스, 변수 등을 작성하고 그 경로를 from 키워드 옆에 작성하게 됩니다. 예를 들어, view/test.js경로에 아래와 같은 코드가 있다고 가정해 보겠습니다.

1
2
3

/* view/test.js */
import { queryAll } from '../src/util.js'
...

import 옆에는 모듈을 특정한 변수처럼 사용할 때 붙일 이름입니다. 위 코드의 import문을 보니, ../src/util.js 파일에 queryAll이라는 함수가 존재함을 짐작할 수 있습니다.

1
2
3
4
5
6
7
8
9

/* ../src/util.js */
export function queryAll(node){
	...
	return res;
}
function queryTest(node){
	...
	return res;
}

위처럼 queryAll함수 앞에 export키워드를 붙여서 “이 함수는 다른 외부에서 import하여 쓸 수 있도록 내보내겠다” 고 정의합니다. 그 덕분에 test.js에서는 queryAll함수를 import를 이용해 가져와서 사용할 수 있었습니다.

named export

만약 여러 개의 함수(혹은 클래스, 변수)를 가져오고 싶으면 어떻게 할까요? 우선, 내보낼 것 앞에 모두 export를 붙여야 합니다.

1
2
3
4
5
6
7
8
9

/* ../src/util.js */
export function queryAll(node){
	...
	return res;
}
export function queryTest(node){
	...
	return res;
}

그 다음 import 를 할 때, { } (중괄호) 안에 가져오고자 하는 것들을 콤마로 여러 개 적으면 됩니다.

1
2
3

/* view/test.js */
import { queryAll, queryTest } from '../src/util.js'
...

queryAll, queryTest와 같이 내보내려는 것에 모두 export를 붙여서 내보내는 방식을 named export 라고 합니다. 여러 개의 값이나 함수를 내보낼 때 유용한 방식입니다.

default export

만약 특정 모듈에서 내보내고자 하는 대상이 단 하나일 경우, export deafult 키워드를 붙여서 알릴 수 있습니다. 내보내려는 것이 하나만 있도록 모듈을 작성하는 경우가 자주 있습니다. 예를 들어, class자체를 외부에서 사용하게 하려는 경우가 생길 수 있습니다.

1
2
3
4

/* ../src/slide.js */
export default class Slide {
  //...
}

혹은 아래와 같은 표기법도 가능합니다. (내보낼 대상과 export키워드가 아래와 같이 떨어져 있어도 가능)

1
2
3
4

class Slide {
  //...
}
export default Slide;

그러면 외부에서 이 클래스를 import 할 때에는 중괄호 없이 불러옵니다.

1
2
3

/* view/test.js */
import Slide from '../src/slide.js'
...

default 키워드를 붙여서 내보낸 것은 중괄호 없이 불러옴에 유의하세요!

그리고 위처럼 default 키워드를 붙여서 내보내는 방식을 default export 라고 합니다.

default export는 아래와 같이, 가져올 때 이름이 원래 것과 달라도 상관없습니다.

1
2
3

/* view/test.js */
import SlideClass from '../src/slide.js' // 가져오는 이름을 Slide 대신 SlideClass로 해도 아무 문제 없음
...