概要 marked - npmを使用してNext.jsのプロジェクトから.mdファイルを試しに呼び出してみたことの備忘録です。 markedのバージョンは "marked": "^10.0.0",です。 公式ではdemoページを見ることができます（左がmdファイルで右が出力されるHTML）。 手順 ま…

概要 必要不可欠でない state 変数をすべて削除するという記事を読んで覚えておきたいと思ったのでブログに書こうと思います。 そもそもuseStateは、UIを操作するための状態管理の仕組みです。 例えば、フォームが送信中であることや、入力エラーがあること…

概要 Reactの公式ページにはエフェクトは必要ないかもしれないというページがあります。 必要のない場面でuseEffectを使うことを避けるという記事で、この記事について自分の経験や理解したことについて書こうと思います。 必要のない箇所でuseEffectを使う …

概要 useMemoの役割や使わない方が良い場合についてまとめようと思います useMemoの役割 useMemoは計算結果のキャッシュを保持して高速化する目的で使用されます。 const tasks = useMemo( () => filterTasks(term), [term] ); 上記の例では初回レンダー時に…

概要 SWRはデータ取得のための React Hooks ライブラリで、データを継続的かつ自動的に受け取ることができる 例えばAPIに渡すパラメータが変わったとき、手動でAPIを叩き直さなくてもSWRを使っていれば変わったときに自動でAPIを叩いてくれる 再検証中かどう…

詳しい動作はコメントに記載しました Next.jsのversionは10.0.7です UserList.tsx import * as React from 'react' import UserListItem from './UserListItem' import { User } from '../interfaces' // Propsで親コンポーネントからUserのリストを取得 typ…

Reactで条件付きレンダリング 私は普段Vue.jsを書いているのですが、Vueでいうv-ifが、Reactだとどうなるのか調べました。 方法1 JSXに{}で式を埋め込む 中括弧{}で式を埋め込む return ( <div> <h1>Hello!</h1> {name && <h2> {name}があれば表示される </h2> } </div> ); この場合、左辺…