[Project-簡易日記]APIの呼び出し

ライフサイクルを使用して素子マウント時にAPIを呼び出し、APIの結果値を日記データの初期値とする
=>素子マウント時の日記データのロード

JSONプレースホルダをfetchとしてAPI導入

知るところ

useEffect使い方

const dataId = useRef(0);

const getData = async() => {
  const res = await fetch('https://jsonplaceholder.typicode.com/comments').then((res)=>res.json())

  const initData = res.slice(0,20).map((item) => {
    return {
      author : item.email,
      content : item.body,
      emotion : Math.floor(Math.random() * 5)+1,
      created_date : new Date().getTime(),
      id : dataId.current++
    }
  })

  setData(initData)
}

async/awaitを使用して非同期関数を同期関数のように動作させる
=>データのインポート後、実行setData(initData)returnを使用するため、current++(接尾辞増加)で次のid値を設定します.
i++(接尾辞増加):接尾辞を使用して増加し、行から増加する値を使用します.
++i(電位増加):増加値として電位増加を用いる공부하며 정리&기록하는 ._. 씅로그