カテゴリー：React
-
11.10
【Recoil】概要
Reactの状態管理ライブラリの一つです。 メリット いくつもストアが分かれているので間違えて状態を更新してしまったとしても影響を最小限にとどめることができます。 useContextと違ってレンダリングの対象を最小限にと…
-
Theme 基本的な使い方 [crayon-647e0179822c0266422958/] createThemeという関数でthemeを作って、ThemeProviderというコンポーネントにラップしてthemeをソース全体に適用…
-
サンプルコード GraphQLの操作情報は以下のように定義しておきます。指定したい情報を定義します。（下の例で言えばname) [crayon-647e0179827cf867243645/] カスタムフックとして以下のhooksを定…
-
Next.jsではクライアントサイドとサーバーサイドの処理を扱うことができるのでApolloClientを使う場合は処理の切り分けが重要になってきます。 サーバーサイドで実行される箇所（SSG、ISR：getStaticProps、get…
-
REST API & Reduxの場合 グローバルストアにReduxを使ってコンポーネント間で状態管理します。 もしくは、最近はRecoilなども使われることも多いです。 GraphQL & Apollo Clie…
-
06.04
【React】バージョン「18」について
Suspenseコンポーネント データの受け取り状態を検知できるコンポーネント [crayon-647e017985793360232583/] 任意のコンポーネント（非同期処理があるもの）が返ってくるまで待機中に表示させたいコンポー…
-
ReactやNext.js(バージョン9.4から使えるようです。)には標準で環境変数機能が備わっています。 環境変数設定ファイル 変数の定義方法 環境変数の反映にはアプリの再起動が必要になります。 React [crayon-64…
-
ReactのCSS記述方法は戦国時代らしい。しっかり学習しておく必要がある。 Pure CSS 通常のCSSです。create-react-appした時にデフォルトで適用されているCSSでもあります。 メリット 「通常のCSS」なの…
-
今はHooksが使える時代なのであまりこの考え方はしないようになってきていますが、過去の案件のソースとかを読む場合に知っておくと良い概念かと思いましたので、まとめておきます。 Reduxを使うにあたってどのようにコンポーネントを分ける…
-
結論 別コンポーネントにpropsで渡す関数はuseCallbackを使い、コンポーネント内で計算結果を値として使う関数に対してはuseMemoを使う。 前提 「useMemoは値を返す。useCallbackは関数を返す。」という前…
