모던 자바스크립트 (모듈) 12-2. 모듈 내보내고 가져오기

export

// 배열 내보내기
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 클래스 내보내기
export class User {
  constructor(name) {
    this.name = name;
  }
}

: 클래스나 함수를 내보낼 때는 세미콜론을 붙이지 않는다

export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 끝에 ;(세미콜론)을 붙이지 않습니다.

 

 

 

 

선언부와 떨어진 곳에 export 붙이기

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 두 함수를 내보냄

 

 

 

 

import *

: 따로 함수나 변수를 가져온다면 목록을 만들어 { ... } 형식으로 작성

// 📁 main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

 

- 모듈에서 가져올 것이 많은 경우

// 📁 main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

: 모듈에서 함수나 변수를 가져올 때는 대상을 구체적으로 명시하는 것이 좋음

: 번들링 과정에서 사용하지 않는 모듈 삭제 과정이 줄어듦

: 호출한 요소를 사용 시 간결하게 사용 가능

 

 

 

 

import as

: 모듈의 이름을 바꿔 가져올 수 있음

// 📁 main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

 

 

 

 export as

: 모듈의 이름을 바꿔 내보낼 수 있음

// 📁 say.js
...
export {sayHi as hi, sayBye as bye};

// 📁 main.js
import * as say from './say.js';

say.hi('John'); // Hello, John!
say.bye('John'); // Bye, John!

 

 

 

 

export default

- 모듈의 종류

: 복수의 함수가 있는 라이브러리 형태의 모듈

: 개체 하나만 선언되더 있는 모듈

 

- default

: 해당 모듈에는 개체가 하나만 있다는 사실을 명확히 표현

// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았습니다.
  constructor(name) {
    this.name = name;
  }
}

// 📁 main.js
import User from './user.js'; // {User}가 아닌 User로 클래스를 가져왔습니다.

new User('John');

: default를 붙여서 모듈을 내모대면 중괄호 없이 모듈을 가져올 수 있음

 

 

 

 

default name

: 함수 선언 부 아래에 default 키워드를 사용하여 기본 내보내기 가능

function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// 함수 선언부 앞에 'export default'를 붙여준 것과 동일합니다.
export {sayHi as default};

 

 

 

 

default export의 이름에 관한 규칙

: named export는 내보냈을 때 사용한 이름 그대로 사용할 수 있어 관련 정보를 파악하기 쉬움

: 그러나 내보내기 할 때 쓴 이름과 가져오기 할 때 쓸 이름이 동일해야함

: name export는 가져올 때 개발자가 원하는 대로 이름을 지정할 수 있음

import User from './user.js';
import LoginForm from './loginForm.js';
import func from '/path/to/func.js';
...

 

 

 

 

모듈 다시 내보내기

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

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

// 📁 auth/index.js

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

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

: 가져온 객체를 즉시 다시 내보내기 할 수 있음

: 외부 개발자가 패키지 안의 파일들을 뒤져 내부 구조를 건드리는 것을 방지할 수 있음

 

 

 

 

default export 다시 내보내기

// 📁 user.js
export default class User {
  // ...
}

: 위 예시는 export User from './user,js'로 다시 내보내기 시 문법 에러가 발생 함

: export export { default as User }로 내보내야함

 

export * from './user.js'; // named export를 다시 내보내기
export {default} from './user.js'; // default export를 다시 내보내기

: 위와 같이하면  export User from './user,js'로 다시 내보내기 가능

 

 

 

 

 

Refference

모듈 내보내고 가져오기