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를 이용해 가져와서 사용할 수 있었습니다.

만약 여러 개의 함수(혹은 클래스, 변수)를 가져오고 싶으면 어떻게 할까요? 우선, 내보낼 것 앞에 모두 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'
...

만약 특정 모듈에서 내보내고자 하는 대상이 단 하나일 경우, 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키워드를 붙여서 내보낸 것은 중괄호 없이 불러옴에 유의하세요!

혹여나 파일이나 폴더 갯수가 많아지고 점점 코드가 복잡해진다면, 위처럼 상대 경로로 코드를 불러오는 것이 불편할 수 있습니다. 도대체 .. 을 몇 개 써야 원하는 상위 디렉토리의 코드를 가져올 수 있을지 답답함이 생길 수도 있구요.

하지만 해결 방법이 있습니다. 프로젝트를 진행하면서 JavaScript 코드를 짤 때에는 webpack과 같은 모듈 번들러를 같이 사용하는 경우가 거의 대부분인데, 이러한 답답함을 webpack 설정을 통해 해소할 수 있습니다. 다음 포스팅에서는 절대 경로로 파일을 import 할 수 있는 해결법을 webpack 포스팅과 함께 작성하도록 하겠습니다.