「Reactハンズオンラーニング」の感想・備忘録5

「Reactハンズオンラーニング」の感想・備忘録4の続き

データ

8.2 データの送信

const [text, setText] = useState("")
const handleClick = () => {
  fetch("./hoge", {
    method: "POST",
    body: JSON.stringify({text})
  })
}
// 〜省略〜
<input type="text" value={text} onChange={e=>setText(e.target.value)}/>
<button onClick={handleClick}>送信</button>

ファイルアップロード

const [file, setFile] = useState(null)
const handleClick2 = (e) => {
  const formData = new FormData()
  formData.append("file", file)
  fetch("./hoge", {
    method: "POST",
    body: formData
  })
}
// 〜省略〜
<input type="file" onChange={e=>setFile(e.target.files[0])} />
<button onClick={handleClick2}>ファイル送信</button>

8.2.2 リクエストの認証

  • トークンが要求されるAPIは、以下のようにAuthorizationヘッダを付加する。
fetch("./hoge", {
  method: "GET",
  headers: {Authorization: `Bearer ${token}`}
})

Githubからリポジトリ一覧を取得するサンプル

  • GithubのSetteings⇒Developer Settingsでトークンを作成しスコープのrepoをチェックしておく
const handleClick = () => {
  fetch("https://api.github.com/user/repos", {
      method: "GET",
      headers: {Authorization: `token ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`}
    })
    .then(response=>response.json())
    .then(console.log)
}

8.3 データの保存

localStorage.setItem("xxx", JSON.stringify(data))
JSON.parse(localStorage.getIem("xxx"))
// セッションの間だけの場合はsessionStorage

8.4.2 仮想リスト

  • 大量のデータを表示する際、スクロールする度に表示しているリストをアンマウントして新たなリストを描画するテクニックを仮想リストまたはウィンドウリストと呼ぶ。
  • 例えば、11件だけ読み込んで画面には5件表示し、上下に3件ずつ非表示のデータを描画する。
  • 有名なライブラリとしてreact-windowがある。

react-windowの使い方

  1. npm install react-windowでインストール
  2. レンダープロップ関数(JSXを返す関数)をタグボディにして、FixedSizeListタグで囲む
  3. レンダープロップ関数の第2引数で受け取ったstyleをルート要素にのstyle属性にセットする(これにより高さがセットされる)
import {faker} from "@faker-js/faker"
import {FixedSizeList} from "react-window"

const users = [...Array(1000)].map((_, index) => ({
  id: index + 1,
  name: faker.person.fullName(),
  email: faker.internet.email(),
  avatar: faker.internet.avatar()
}))

function FakerSample() {
  const renderRow = ({index, style}) => (
    <div key={users[index].id} style={{...style, display: "flex"}}>
      <img src={users[index].avatar} width={128} style={{marginBottom: "10px"}}/>
      <div><h2>{users[index].id}: {users[index].name}</h2><h3>{users[index].email}</h3></div>
    </div>
  )
  return (
    <FixedSizeList height={window.innerHeight} width={window.innerWidth-20} itemCount={users.length} itemSize={120}>
      {renderRow}
    </FixedSizeList>
  );
}

export default FakerSample;

コメント

タイトルとURLをコピーしました