06.export, import (내보내기, 가져오기)

Updated:


export, import

  • JS 에서는 import 키워드로 가지고 올 수 있고, export 키워드로 외부로 빼낼 수 도 있습니다 - 하나하나를 module 이라고 합니다.

image

1. default (export)

  • 이름을 따로 지정하지 않아도 export 가 되는 방식입니다.
  • 만약, import 할때, 따로 이름이 없기 때문에 변수를 따로 지정해도 작동에는 문제가 없습니다
  • 주의!! default 에서는 하나의 데이터(함수) 만 내보내지 못합니다.
export default function () {
  return Math.floor(Math.random() * 10)
} // 함수에 이름이 없어도 export 가 됨

export default function (data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}

2. named (export)

  • 반드시 이름이 있어야 하며, import 시, {} 를 사용하여 표시해주어여 함니다.
// export
export default function random() {
  return Math.floor(Math.random() * 10);
}

// import
import { random } from "./getRandom";
  • named 는 여러개의 데이터(함수)를 export, import 할 수 있습니다.
// export
export function random() {
  return Math.floor(Math.random() * 10);
}
export const user = {
  name: "Jacob",
  age: 80,
};

// import
import { random, user } from "./getRandom";
console.log(random());
console.log(user);
  • as 키워드를 사용하여 import 시 이름을 바꿔서 사용할 수 있습니다.
// import
import { random, user as jacob } from "./getRandom";
console.log(random());
console.log(jacob);
  • named export 에서 한번에 전체 다 가지고 오려면 와일드 카드(Wildcard Character, *) 를 사용해서 가지고 올 수 있습니다.
import * as G from "./getRandom"; // G는 아무 이름 변수를 사용해도 상관 없음
console.log(R);

3. sum up

  • Js에서 어떠한 특정한 내용을 딱 한번만 내보내기 할 경우는 되도록이면 export defalut 를 사용합니다.
  • 내보내기가 많으면 named export 를 사용해서 작성해야 합니다.

Reference

Leave a comment