한 파일 내에서 여러 변수/함수 들을 export 하는 방법이다. export 된 이름과 동일하게 설정해야 한다.
export const hi = 'Hello, world!';
export function func() {
console.log('Hello, world!');
}
...
...
import { hi, func } from './module.js';
console.log(hi); // 'Hello, world!'
func(); // 'Hello, world!'
만약 선언한 변수 이름과 다르게 하여 사용하고 싶다면 import 에서 as 를 사용해야한다.
export const hi = 'Hello, world!';
export function func() {
console.log('Hello, world!');
}
...
...
import { hi as h } from './module.js';
console.log(h) // 'Hello, world'
한 파일 내에서 한 개의 값만을 export 하는 방법이다. import 시에는 한개의 변수/함수만 export 하는 경우라면 import 호출 시 어떤 이름을 사용해도 상관 없다.
const hi = 'Hello, world!';
function func() {
console.log('Hello, world!');
}
export default hi;
...
...
// import hi from './module.js';
import asdf from './module.js';
// console.log(hi) // 'Hello, world';
console.log(asdf) // 'Hello, world';
export default를 통해서 여려 변수/함수를 export 하는 방법도 있다. 하나의 객체를 통해 export 하는 것이다. 이 경우 import 사용방식은 named export와 비슷해진다.
const hi = 'Hello, world!';
function func() {
console.log('Hello, world!');
}
export default {hi,func}
...
...
// import module from './module.js';
import { hi, func } from './module.js';
// console.log(module.hi); // 'Hello, world';
console.log(hi) // 'Hello, world';
지정된 모듈의 모든 변수/함수를 가져온다. 가져와야 하는 변수/함수가 많은 상황에서 모듈을 가져오는 과정을 쉽게 작성할 수 있다는 장점이 있다.
export const hi = 'Hello, world!';
export function func() {
console.log('Hello, world!');
}
...
...
import * as module from './module.js';
console.log(module.hi) // 'Hello, world'
console.log(module.func) // 'Hello, world'
참고
Export Default 과연 제대로 알고계십니까?
ES modules - 만화로 보는 심층 탐구
import / export