모듈 다시 내보내기

export ... from ... 문법을 사용하면 가져온 개체를 즉시 ‘다시 내보내기(re-export)’’’ 할 수 있습니다.
이름을 바꿔서 다시 내보낼 수 있는 것이죠.
예시를 살펴봅시다.

export {sayHi} from './say.js'; // sayHi를 다시 내보내기 함

export {default as User} from './user.js'; // default export를 다시 내보내기 함

다시 내보내기가 왜 필요한건지 의문이 드실 겁니다.
유사 케이스를 통해 다시 내보내기가 실무에서 언제 사용되는지 알아봅시다.

NPM을 통해 외부에 공개할 ‘패키지(package)’를 만들고 있다고 가정합시다.
이 패키지는 수많은 모듈로 구성되어있는데, 몇몇 모듈은 외부에 공개할 기능을, 몇몇 모듈은 이러한 모듈을 도와주는 ‘헬퍼’ 역할을 담당하고 있다고 합시다.

패키지 구조는 아래와 같습니다.

auth/
    index.js
    user.js
    helpers.js
    tests/
        login.js
    providers/
        github.js
        facebook.js
        ...

진입점 역할을 하는 ‘주요 파일’인 auth/index.js을 통해 기능을 외부에 노출시키면
이 패키지를 사용하는 개발자들은 아래와 같은 코드로 해당 기능을 사용할 겁니다.

import {login, logout} from 'auth/index.js'

이때 우리가 만든 패키지를 사용하는 외부 개발자가 패키지 안의 파일들을 뒤져 내부 구조를 건드리게 하면 안 됩니다.
그러려면 공개할 것만 auth/index.js에 넣어 내보내기 하고 나머는 숨기는 게 좋겠죠.

이때 내보낼 기능을 패키지 전반에 분산하여 구현한 후, auth/index.js에서 이 기능들을 가져오고 이를 다시 내보내면 원하는 바를 어느 정도 달성할 수 있습니다.

// auth/index.js

// login과 logout을 가지고 온 후 바로 내보냅니다.
import {login, logout} from './helpers.js';
export {login, logout};

// User를 가져온 후 바로 내보냅니다.
import User from './user.js';
export {User};

이제 외부 개발자들은 import {login} from "auth/index.js"로 우리가 만든 패키지를 이용할 수 있습니다.

export ... from ...는 위와 같이 개체를 가지고 온 후 바로 내보낼 때 쓸 수 있는 문법입니다.
아래 예시는 위 예시와 동일하게 동작합니다.

// auth/index.js
// login과 logout을 가지고 온 후 바로 내보냅니다.
export {login, logout} from './helpers.js';

// User 가져온 후 바로 내보냅니다.
export {default as User} from './user.js';