1部品1責務

React入門 / 全 6 枚

まとめるか、分けるか

1つの部品が複数の役目を抱えると、こうなりがちです。

役目をまとめる

function App() {
  // プロフィールも作品一覧も
  // ここに全部書く
}

役目ごとに分ける

function App() {
  return (
    <div>
      <ProfileCard />
      <WorkList />
    </div>
  );
}

App を読むだけで、ページが何と何でできているか分かるようになります。

1 / 6

← → キーでも送れます