JavaScript Reactでグローバルな状態を管理する【Context/useContext】 グローバルな状態管理の方法は複数ありますが、Reactに標準で実装されてるReactHooksのContextとuseContextの使い方をまとめたのでメモ。 グローバルな状態管理とは コンポーネント間で値を渡すにはProp... 2022.06.28 JavaScript
JavaScript Reactのパフォーマンスを最適化する方法を調べました【React.memo/React.useCallback/React.useMemo】 Reactはコンポーネントを組み合わせて作っていきます。日頃あまり意識することはありませんが、一部に負荷の高いコンポーネントがあると、レンダリングの最適化を考える必要があります。Reactのレンダリングの仕組みと、パフォーマンスの最適化に... 2022.06.05 JavaScript
JavaScript useReducerの使い方についてまとめました【React】 stateとは、コンポーネント内で状態を保持できる変数です。Reactには、stateを管理できるフックがいくつか用意されています。 stateの管理は、主にuseStateを使っていたので、useReducerを使う機会があまりあ... 2022.05.22 JavaScript
JavaScript useRefで値を更新したりDOMを参照する方法【React/useRef/useState/useEffect/TypeScript】 useRefは、主にDOMを参照したい時に使用しますが、改めて使い方を調べたのでメモしておきます! useRefとは useRefは、useStateと同じく値を保持できるフックです。useStateとの主な違いは、値を更新し... 2022.05.05 JavaScript
JavaScript APIからデータを取得してブラウザに表示する方法を調べました【React/axios/useEffect/zipcloud】 ReactでAPIデータを取得して何かをする。という場面が多いので、今後の雛形としてメモしておきます。 住所検索アプリ(サンプル) サンプルとして、郵便番号から住所を検索できるアプリを作りました。ユーザーが入力した郵便番号をA... 2022.04.05 JavaScript
JavaScript Reactの開発環境をコマンドで構築する方法【JavaScript/TypeScript】 開発環境の構築方法は忘れやすいのでメモするようにしています。今回はReactの開発環境について調べたのでメモ。 Reactの環境構築はコマンド1つで完了動して、以下コマンドを実 結論から言うと、プロジェクトを作成するディレクト... 2022.02.28 JavaScript
JavaScript Reactでページ遷移する方法を調べました【React/React Router/react-router-dom/v5】 Reactでページ遷移する方法を調べました。忘れそうなのでメモしておきます。TypeScriptで記述していますが、設定の方法は普通のJavaScriptとあまり変わらないと思います。 react-router-domとは R... 2022.02.18 JavaScript
JavaScript useStateを理解するためにサンプルを作って確認しました【React/useState】 ReactのuseStateがいまいち理解できなかったので、サンプルをいくつか作成して動きを確認しました。主にリアルタイムの動きに使えそうです。 useStateとは Reactにはコンポーネントに状態を保管、更新できるuse... 2022.02.08 JavaScript