모듈(Module) - export, import

Module

모듈(Module) 이란 프로그램의 구성 요소로써, 데이터나 함수를 하나로 묶은 단위를 이야기 합니다.

주로 개발하는 시스템에서 점차 소스의 양이 늘어나고 관리하기 어려워 질 때 파일을 여러개로 분리해야 할 때 모듈 단위로 파일을 분리합니다.

export

모듈에서 변수나 함수, 클래스 등을 선언하면서 export 문을 앞에 붙이면 값을 내보낼 수 있으며 내보낸 값은 다른 파일에서 import 문으로 가져와 사용할 수 있습니다.

// 변수 내보내기 var, let도 동일
export const name = 'Jason';

// 함수 내보내기
export function getLog() {
  console.log('Hello');
}

// 클래스 내보내기
export class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
}

named export

named 방식은 모듈에서 여러 항목을 내보낼 때 사용하며, 이름이 지정되어 다른 모듈에서 여러 항목을 한번에 가져올 수 있습니다.

// 변수 내보내기 var, let도 동일
export const name = 'Jason';

// 함수 내보내기
export function getLog() {
  console.log('Hello');
}

// 클래스 내보내기
export class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }
}

이름을 선언해서 내보는 값을 가져 올 때는 한번에 여러개의 항목을 가져올 수 있다.

import { name, getLog, Person } from './basicModule'; 

default export

모듈에서 한번에 하나의 항목만을 지정해서 내보내기가 가능하며, default 내보내기 방식은 named 방식과 다르게 항목을 가져올 때는 하나의 항목만 가져올 수 있습니다.

// 변수를 default export로 지정
const name = 'Jason';
export default name;

// 함수를 default export로 지정
export default function getLog() {
  console.log('Hello');
}

// 클래스를 default export로 지정
export default class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }
}

이렇게 default로 내보낸 값들은 아래 코드 처럼 하나의 값만을 import 할 수 있습니다.

import name from './basicModule';
import getLog from './basicModule';
import Person from './basicModule';

import

import는 모듈에서 export를 통해 내보낸 값을 다른 파일에서 로드하기 위해서 사용 됩니다.

import name from "./basicModule";
import * as name from "./basicModule";
import { name, getLog, Person } from "./basicModule";
import { getLog as getPerson } from "./basicModule";

모듈 전체 가져오기

모듈 전체를 가져오기 위해서는 * 와 함께 as 키워드를 통해 새로운 이름을 할당해주어야 합니다.

// export로 함수 내보내기
export function getHello() {
  console.log('Hello');
}

export function getBy() {
  console.log('Bye');
}

// * 로 모듈 내 모든 함수 가져오기
import * as getLog from './basicModule';

getLog.getHello(); // Hello
getLog.getBye(); // Bye

하지만 이렇게 모든 걸 한번에 가져오는 방식은 방대한 양의 소스를 import 하는 경우에는 사용하지 않는 값들도 가져오기 때문에 리소스가 낭비될 수도 있습니다.

모듈 이름 변경

앞에서도 사용된 것처럼 as 키워드를 사용하고 뒤에 새로운 이름을 명시하면 이름을 바꿔서 모듈을 가져오거나 내보낼 수 있습니다.

// 새로운 이름으로 내보내기
export const name = 'John';
export { name as naming };

// 가져온 값의 이름을 변경
import naming as personName from './basicModule';

Reference

JAVASCRIPT.INFO: 모듈 내보내고 가져오기

MDN Web Docs: export

poiemaweb: Module

모던 자바스크립트 Deep Dive (자바스크립트의 기본 개념과 동작 원리)