カテゴリー：React
-
【React】「useEffect」について
04.11
useEffect コンポーネントに副作用を追加するフックです。副作用とは次のような処理を実行する関数のこと。コンポーネントのマウント後に指定した副作用を実行することが可能です。 DOMの変更 APIとの通信 非同期…
-
【React】「useRef」の実践的な使い方
02.27
公式サイトに載っているサンプルになります。 [crayon-607b8e5878fb3737128879/] input要素のref属性にuseRefで宣言した値を設定します。そうすることでinput要素への関連付けをすることが可能です…
-
関数コンポーネント（React.FC） Reactの関数コンポーネントの型になります。React.FunctionalComponentとも書けます。 例 [crayon-607b8e587944c157344498/] 下…
-
Context APIの概念 Contextオブジェクト 親子関係にない離れたコンポーネント間で共有するためのパーツです。Contextオブジェクトには「Context Provider」と「Context Consumer」の2種類の…
-
stringの値を渡す。 useStateで定義した関数を子に渡して子から関数を呼べば親の状態も変更することができます。 親コンポーネント [crayon-607b8e5879c82603974114/] 子コンポーネント [cr…
-
【Redux】「redux-form」について
02.14
redux-formとは？ React + Reduxでフォーム画面を作成する際に便利なReduxのライブラリです。 インストール [crayon-607b8e587a05c366733950/] 導入 Reducersに導入しま…
-
redux-sagaとは？ Reduxにタスクという概念を持ち込むためのライブラリです。タスクというのはOSのプロセスのようにそれぞれが独立しており並行して動きます。 メリット 小さなコードに分割できる。 コードが再利用…
-
Redux Tool Kitとは？ ReduxのStoaをsliceという単位に分割します。 createSlice sliceを作成します。 configureStore ReduxのStoreに作成したsliceを登録します。…
-
【React】「API」の実行をテストしたい場合
02.11
APIを直接呼ぶ場合 例えば、Renderというコンポーネントが初期表示時にUseEffectを使用してAPIで表示するデータを取得する処理があった場合は下記のようなテストを書きます。 [crayon-607b8e587a8f15276…
-
【React】propsのテスト
02.11
propsで渡すものによってはモックを使ったりする場合もあるかと思いますが、propsで渡した値自体のテストを作りたい場合もあるかと思います。 propsでlistを渡すケース Reactではlistはmapなどを使って表示させることが…