자바스크립트 모듈(Module)

모듈(Module) 이란?

자바스크립트 코드의 크기가 갈수록 커지고 기능도 복잡해지면서 자바스크립트 커뮤니티는 코드 전체를 기능 단위의 코드 뭉치로 분해하고 필요에 따라 결합할 수 있도록 하는 시스템의 도입을 고민하였습니다. 그 결과 도입된 것이 바로 모듈 시스템(Module System)입니다. 이 때 사용되는 코드 뭉치 각각을 모듈(Module)이라고 합니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈 시스템은 2015년에 표준으로 등재되었습니다. 이 이후로 관련 문법은 진화를 거듭해 이제는 대부분의 주요 브라우저와 Node.js가 모듈 시스템을 지원하고 있습니다.

 

모듈 활용법

모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

• export : 모듈 내보내기
• import : 모듈 가져오기

1. named export

모듈을 내보내는 가장 쉬운 방법은 내보내려는 항목 앞에 export 지시자를 배치하는 것입니다. 그 항목이 변수인지, 함수인지, 클래스인지는 상관없습니다. 최상위 항목이기만 하다면 이 방법으로 모두 내보낼 수 있습니다. 이런 방법을 named export라고 합니다.

한 파일 내에서 여러 변수 / 클래스 등을 export 하는 것이 가능합니다.

export class Person { /* ... */ }
export class Job { /* ... */ }

다만, import 시 { } 안에다가 export 된 이름과 동일하게 설정해야 합니다.

import { Person, Job } from './MyClass'

다른 이름으로 import 할 수 있으나 아래처럼 as를 사용해야 한다.

import { Person as Human, Job } from './MyClass'

 

import * as Im from './MyClass'
// 이렇게 import 하면 Im.Person 이런 식으로 사용해야 합니다.

2. default export

대개는 한 파일에서 하나의 개체만 모듈로 넘기는 방식을 선호합니다. 그에 맞춰 유용하게 쓰이는 것이 default export 입니다. 내보내는 방법은 크게 다르지 않습니다. 위의 방식에서 export 뒤에 default만 더해주면 됩니다.

default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스만 export 할 수 있습니다.

const Authentication = () => {
  // ...
}

export default Authentication

import 할 때는 아무 이름으로나 import 가능합니다.

즉, 

import Authentication from '../AuthenticationPage'

또는

import ThisIsNotAuthentication from '../AuthenticationPage'

 

var, let, const 를 바로 export default 할 수 없습니다.

// 이렇게 하면 안됩니다
export default const MY_NAME = "chanPark"

정리해보면,

named export 는 여러 값을 내보낼 때 유용합니다. 가져올 때는 내보낼 때와 동일한 이름을 사용하거나, import { name as newName } 구문을 사용해야 합니다.

default export 는 한 파일에서 하나의 개체만을 내보낼 수 있으며 어떤 이름으로도 가져올 수 있습니다.