TIL 24. インポートエクスポート

JavaScriptから関数やクラスをエクスポートする方法は大きく2つあります.1つ目はnamedexport、2つ目はdefault exportです.

1. named export

有名で輸出するには有名でなければならない.名前付きエクスポートされたデータを読み込むには、エクスポートされた名前を使用する必要があります.

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

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

各データの名前さえあれば、1つのファイルに複数のデータが存在することができます.

//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' 

名前付きでエクスポートされたデータは、一度にすべてロードできます.*を使えばいいです.
ここで使用される*は、ワイルドカードとも呼ばれる.

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

namedexportはdefault exportと同時に1つのファイルに書き込むことができます.

//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)
}*/

defaultにエクスポートされたデータをロードする場合は、指定したデータ名を使用する必要はありません.

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

defaultとしてエクスポートされたデータには、ファイルにdefaultデータが1つしかない必要があります.