• ホーム
• miyabisan2

miyabisan2の記事一覧

1. 06.13

   【React】「Redux Tool Kit」のテスト

   各コンポーネントからuseDispatchなどでRedux Tool Kit内のReducer関数を呼び出したり、useSelectorでstateを参照したりすると思いますが、RTK独自の構文になるのでRenderでそのまま呼び出そうとし…

   • React, Redux
   • コメントを書く

2. 06.13

   【React】「ページ遷移」のテスト

   コンポーネント内でページ遷移のテストをする方法です。 react-router-domをモック化する方法 react-router-dom自体をjestでモック化します。ただ、この方法だとwithRouterとかがコードに記述…

   • React
   • コメントを書く

3. 06.06

   【React】「React Query」の「useMutation」について

   useMutationとは？ React Queryでデータを登録・編集・削除したりする場合に使います。AXIOSなどのHTTPライブラリの代替プラスキャッシュ機能を持っている感じです。 動きとしては、APIでバックエンドのデ…

   • React
   • コメントを書く

4. 06.05

   【React】「React Query」の「useQuery」、ステータスについて

   インストール react-qureryとdevtoolsをインストールしておくと便利です。 [crayon-6aa30687a8b89202403443/] react-query-devtools 導入するとブラ…

   • React
   • コメントを書く

5. 05.30

   【React】「React Query」について

   React Queryとは？ 2020年2月にリリースされた。 リリースノート バージョンリリース日説明342022/4React18に対応した。suspenseなどと組み合わせる実装が増えてます。 SWR …

   • React
   • コメントを書く

6. 05.30

   【React】パフォーマンス改善対策、レンダリングの仕組みなど

   Reactのパフォーマンス改善対策には、主に2つあります。 1.サーバーからのデータ取得回数を減らす キャッシュをすることが重要。従来のuseContextやReduxはキャッシュのメカニズムを持っていない。 近年登場し…

   • React
   • コメントを書く

7. 05.23

   【React/Redux】「Redux Tool Kit」で非同期のSliceを作る場合、builderオブジェクト

   Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-6aa30687a8ee9848950677/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…

   • React, Redux
   • コメントを書く

8. 05.22

   【TypeScript】「as」、「any」、「?」、「!」、「型の互換性」、「アサーション」について

   as、any TypeScriptが提供する型安全を否定する行為であり基本的に使ってはいけない。 anyやasを使って良いケース TypeScriptのコンパイルが完璧ではなく使用を余儀なくされるケースがある。 ?(Optional…

   • TypeScript
   • コメントを書く

9. 05.16

   【Next.js】「CSR(UseSWR)」について

   useSWRとは？ 「クライアントサイドレンダリング」の技術です。なので、もしブラウザでJavaScriptを無効化していたら動かなくなります。（なお、SSGやSSRやISRなどはサーバーサイドで動作するのでブラウザのJavaScr…

   • Next.js
   • コメントを書く

10. 05.16

    【Next.js】Next.jsの基本コンポーネント、ページ遷移、ページのテスト

    基本コンポーネント Head [crayon-6aa30687a97fd544130507/] 以下のように使います。タイトルが表示されます。 [crayon-6aa30687a9803775811081/] …

    • Next.js
    • コメントを書く