Exporting and importing in ES6 modules

모듈을 import하고 export하는걸 배웠다

shoppingCart.js라는 모듈 만들어주고

//Exporting module
console.log('Exporting module');

const shippingCost = 10;
const cart = [];

export const addToCart = function (product, quantity) {
  cart.push({ product, quantity });
  console.log(`${quantity} ${product} added to cart`);
};

export이라고 저렇게 앞에 써주면 됨

import해주는 script.js에는 이렇게 써줌

//Importing module
import { addToCart } from './shoppingCart.js';
console.log('Importing module');

addToCart('bread', 5);

신기하게 addToCart 여기에 적혀있는 함수도 아닌데
호출됨 ㅎㅎㅎ 굳!

export는 한번만 쓸 수 있는게 아니라
여러번 써줄 수도 있다.

shoppingCart.js

//Exporting module
console.log('Exporting module');

const shippingCost = 10;
const cart = [];

export const addToCart = function (product, quantity) {
  cart.push({ product, quantity });
  console.log(`${quantity} ${product} added to cart`);
};

const totalPrice = 237;
const totalQuantity = 23;

export { totalPrice, totalQuantity};

script.js

//Importing module
import {
  addToCart,
  totalPrice as price,
  totalQuantity,
} from './shoppingCart.js';

addToCart('bread', 5);
console.log(price, totalQuantity);

이렇게 as로 이름 바꿔줄수도 있음...

import * as shoppingCart from './shoppingCart.js';
shoppingCart.addToCart('bread', 5);
console.log(shoppingCart.totalPrice);

위에꺼 지우고 이렇게 전체를 import하는걸로 써줄 수 있음.

default export라는것도있는데
요건 when we only want to export one thing per module

export에서 쓸 때

export default function (product, quantity) {
  cart.push({ product, quantity });
  console.log(`${quantity} ${product} added to cart`);
}

이렇게 export에 default를 붙여준다.

default import 해줄때는 이렇게 써주면 됨

import add from './shoppingCart.js';
add('pizza', 2);