Reactでのデザインパターン

1.Single Responsibilityによるデザインパターン

• 記事一覧を例に挙げる
  • 記事一覧画面(Article List Pageコンポーネント)
    • データを取得して、一覧のレイアウト画面をレンダリングする責務
  • 記事一覧コンポーネント(Article List コンポーネント)
    • 記事一覧をレンダリングする責務。記事カード同士の幅をここで調整
  • 記事カードコンポーネント(Article Card コンポーネント)
    • 1つの記事をカードを表示する責務。適宜、カードのスタイルを変える

2.Page, Feature, uiコンポーネントによるデザインパターン

• PageコンポーネントはデータフェッチやGA4など、外部とのやり取りを行う責務やレイアウトを担当
• Feature コンポーネントはバリデーション、送信処理を行う責務
• uiコンポーネントはロジックや状態を含まないスタイルのみのコンポーネント
• Pageコンポーネントにあるロジックをxxx.hooks.tsに切り出すことで、Pageコンポーネントはレンダリングの責務に集中できる

3.Compound Componentsによるデザインパターン

• 複数のコンポーネントを組み合わせて1つのコンポーネントとして扱う

• Selectコンポーネントを例に挙げる

  • Select(選択肢の状態管理)
  • Option(選択肢)

• useContextを用いて、入力(or選択)状態と選択するロジックを管理する

• メモ: コンポーネントの責務をそれぞれ明確にすることでコンポーネントの共通化をする判断がしやすくなる

参照

Design patterns in React