TIL 24. 내보내기 가져오기

자바스크립트에서 함수나 클래스를 내보내는 방식에는 크게 두가지가 있다. 첫째는 named export, 둘째는 default export 이다.

1. named export

named로 export할 때에는 반드시 이름이 필요하다. named export된 데이터를 불러오기 위해서는 {} 와 export했던 이름을 사용해야한다.

//getRandom.js
export function random(){ //function에 이름이 있다.
  return Math.floor(Marh.random() * 10)
}

//main.js로 named export 데이터 불러오는 법
import { random } from './getRandom'

각 데이터의 이름만 있으면 한 파일에 여러 개의 데이터가 존재할 수 있다.

//getRandom.js
export function random(){ //function에 이름이 있다.
  return Math.floor(Marh.random() * 10)
}

export const user = {
  name : 'HEROPY',
  age: 85
}

//main.js로 두개의 데이터 불러오기
import { random, user } from './getRandom'

불러오는 데이터의 이름을 다르게 지정해서 사용할 수도 있다.

//main.js, user데이터를 customer이라는 이름으로 바꿔 사용한다.
import { random, user as customer } from './getRandom' 

named export된 데이터를 모두 한번에 불러올 수도 있다. *를 사용하면 된다.
여기서 사용하는 *를 와일드 카드라고도 부른다.

//main.js
import * as 원하는이름 from './getRandom' 

named export는 defualt export와 한 파일에서 동시에 함께 쓸 수 있다.

//getRandom.js
export function random(){ //function에 이름이 있다.
  return Math.floor(Marh.random() * 10)
}

export const user = {
  name : 'HEROPY',
  age: 85
}

export default 123 // 숫자데이터 123 export

2. default export

default통로로 데이터를 내보낼때에는 이름을 지정할 필요가 없다.

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

/* 이름을 붙여도 문제될 것은 없다.
export default function getType(data) {
  return Object.prototype.toString.call(data).slice(8, -1)
}*/

defualt 로 내보내기 된 데이터를 불러올때는 꼭 정해진 데이터 이름으로 불러올 필요가 없다.

//main.js
import 원하는이름 from './getType' 
console.log(원하는이름(1,2,3))

default 로 내보내기 되는 데이터의 경우 해당 파일에 default 데이터가 하나만 있어야 한다.