propsのデータフローを整理する

現状を整理する: 今わからないことは何か？

1. propsの受け渡し方: コンポーネントが特定のpropsをどこから受け取り、どこに渡すのか
2. 非同期データの取り扱い: get...()という非同期関数を使ったデータを取得する流れ
3. TypeScriptの型の理解: propsへの型定義の仕組み
4. コンポーネント間のデータフロー: 親コンポーネントで取得したデータを子コンポーネントに渡す際のデータの流れが見えづらい

propsの受け渡し

基本的なデータフロー

コード例

// app/page.tsx
import ChildComponent from './components/ChildComponent';

export default function Home() {
  return <ChildComponent message="こんにちは" />;
}

// app/components/ChildComponent.tsx
type ChildProps = {
  message: string;
};

export default function ChildComponent({ message }: ChildProps) {
  return <h1>{message}</h1>;
}

データフロー図

props: コンポーネントに渡す引数のようなもの

親コンポーネントから子コンポーネントに値を渡すための仕組みを指す。
propsには以下の特徴がある:

1. 読み取り専用で子コンポーネント内で変更することができない
2. 使用することでコンポーネントが外部からデータを受け取り、内容に基づく表示や振る舞いができる

ざっくり言うと…

親コンポーネントとは、コンポーネントを利用する側
子コンポーネントとは、コンポーネントを利用される側

非同期データの取り扱い

TypeScriptの型定義

コンポーネント間のデータフロー

進行中の教材のデータフロー図（ブログサイト）08.18更新時点

フローの説明

1. blogAPI.tsのgetAllArticles関数がホームページのコンポーネント（app/page.tsx）でデータを取得
2. 取得したデータ（articles）が記事リストのコンポーネントにpropsとして渡される
3. 記事リストのコンポーネントが個々の記事コンポーネントにデータを渡す