🐜 Mineアプリケーションプロジェクト-上部タブ

ホームページを作成した後、次に簡単に見える「予算画面」を作成します.
最初は、予算画面とカレンダー画面は簡単なページだと思います.画像をよく見ると、コードが隠されている間、私たちは興味のある部分を反応で分離してきた共通の部分を見て、興味のある部分を分離し、共通の要素を再使用すべきだと思います.
「予算」画面は、「上」タブ/>+「予算/>+「下」タブ/>で構成されています.
上端ラベルですが、どう言えばいいですか?
初めて思ったのはMonthlyBudgetContainer
直感的にネーミングされていますが、あまり満足していません
普通のアプリ画面では、上のラベル、ステータスバー、ナビゲーションバーなどがあると思い、グーグルで考えながらStateBarCardと名付けました.
一度にグループ名を決めるのは難しいですね.
ここで、StateBarCard構成部品の作成を本格的に開始します.

export default function StateBarCard() {
  return (
    <>
    // Todo...
    </>
  );
}

ここで気になる事を分けて

移動する構成部品

収益および支出取引履歴を表示するコンポーネント

次のコンテナ構成部品を使用して、それぞれ関心分離を行います.

export default function StateBarCard() {
  return (
    <>
      <MonthSwiperContainer />
      <BreakDownContainer />
    </>
  );
}

🙋 なぜコンテナ部品を使うのですか?
コンテナ構成部品とプレゼンテーション構成部品を知っていますか?
表示素子とコンテンツ素子編
これからは本格的な開発機能が必要な部分です
各状態と動作が必要です.
このプロジェクトのほとんどのステータスとアクションは冗長性を使用するため、これらのコンポーネントはこのセクションでデータ処理能力を持っているため、コンテナコンポーネントと命名しました.

📝 Requirements

ААААААА

月に移動する構成部品
year, month

収益および支出取引履歴を表示するコンポーネント
income, expense