Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native で状態管理とコンポーネント設計に悩んだ話

Avatar for zerosant zerosant
June 03, 2022

React Native で状態管理とコンポーネント設計に悩んだ話

Avatar for zerosant

zerosant

June 03, 2022
Tweet

Other Decks in Technology

Transcript

  1. React Native でコンポーネント設計と 状態管理に悩んだ話 at TECH STAND #8 React Native

    & React 2022.06.03 スターフェスティバル株式会社 ソフトウェアエンジニア 吉藤 徹
  2. 自己紹介 吉藤 徹 Yoshifuji Toru スターフェスティバル株式会社 ソフトウェアエンジニア @zerosant 普段は TypeScript

    でサーバーサイド・フロントエンドを書いています。 Node.js や React がメイン。最近はサーバーサイド寄りが若干多め。
  3. 状態を分類した 1. セッションデータ ◦ 認証情報やそれに関連するユーザー情報・ユーザー設定。 ◦ 多くのページで使用されることを想定している。 2. ドメインデータ ◦

    「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ◦ サーバーからAPI経由で取得する。 ◦ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 ◦ フォームの入力状態や開閉状態など。 ◦ ユーザーの操作によって変更され、 UIの表示に影響する。
  4. 状態の分類 → 状態管理の手法 1. セッションデータ → React Context ◦ 認証情報やそれに関連するユーザー情報・ユーザー設定。

    ◦ 多くのページで使用されることを想定している。 2. ドメインデータ → Local State or Redux ◦ 「商品」や「注文」といった、サービスが取り扱う固有なデータ。 ◦ サーバーからAPI経由で取得する。 ◦ 未取得・取得成功/失敗といった通信に関する状態も同時に持つ。 3. UIの制御状態 → Local State or React Context ◦ フォームの入力状態や開閉状態など。 ◦ ユーザーの操作によって変更され、 UIの表示に影響する。
  5. 状態管理の手法 : React Context いつ React Context を使うのか → ページを跨いで保持したいもので、更新頻度が低いものに使う

    コンテクストは、ある React コンポーネントのツリーに対して「グローバル」とみなすことができる、現在の認証済 みユーザ・テーマ・優先言語といったデータを共有するために設計されています。 React 公式 - コンテクスト
  6. 状態管理の手法 : React Context React Context で管理するもの • セッションデータ ◦

    すべてのページ/画面にまたがって使用する。 ◦ 更新頻度は低い • UIの制御状態 ◦ グローバルな制御状態のみ。 ◦ ModalとかSnackbarとか。
  7. 状態管理の手法 : Local State Local State で管理するもの • ドメインデータ ◦

    特定のページ/画面のみで使用する、ページ固有のものに限る。 • UIの制御状態 ◦ フォームの入力状態など。 ◦ コンポーネントのライフサイクルに依存するもの。
  8. まとめ • 状態管理に悩んだ話 ◦ 状態を三分類した。 ◦ 状態の特性ごとに適した状態管理手法を検討した。 • コンポーネント設計に悩んだ話 ◦

    ページ/画面単位でビューとロジックを分離した。 ◦ ほんとはもっと細かい悩みはたくさんあるけど紹介しきれない ...!