React 入門：コンポーネント間のデータ共有の基本

React ではコンポーネントを小さく分けて再利用する設計が基本です。しかし、複数のコンポーネントが同じデータにアクセスしたい場合、コンポーネント間でデータをどう共有するかが課題になります。

今回は、基本的なデータ共有の方法と考え方を整理して紹介します。

1. 親から子へのデータ共有（Props）

最も基本的な方法は Props を使うこと です。親コンポーネントが持つデータを子コンポーネントに渡す形です。

function Child({ name }) {
  return <p>こんにちは、{name}さん！</p>;
}

function Parent() {
  const userName = "太郎";
  return <Child name={userName} />;
}
  • Parent がデータを持ち、Child に渡して表示
  • 一方向のデータフロー（親 → 子）

2. 子から親へのデータ共有（関数を Props として渡す）

子コンポーネントから親にデータを伝えたい場合、親側で関数を定義し、それを Props として子に渡します。

function Child({ onClick }) {
  return <button onClick={() => onClick("クリックされました")}>送信</button>;
}

function Parent() {
  const handleChildClick = (message) => {
    console.log("子からのメッセージ:", message);
  };

  return <Child onClick={handleChildClick} />;
}
  • 子がボタンを押すと、親の関数が呼ばれてデータを受け取れる
  • これも基本的には 一方向のフロー

3. 状態を上位コンポーネントに持たせる（リフトアップ）

複数の子コンポーネントで同じデータを共有したい場合、State を共通の親に持たせる方法があります。これを「リフトアップ（Lifting State Up）」と呼びます。

例：複数の入力フォームで同じ値を管理

import { useState } from "react";

function Input({ value, onChange }) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
}

function Display({ value }) {
  return <p>入力内容: {value}</p>;
}

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <Input value={text} onChange={setText} />
      <Display value={text} />
    </div>
  );
}
  • text は親コンポーネント App が管理
  • Input で変更 → Display に反映
  • これで複数の子コンポーネント間で同じ状態を共有できる

4. コンテキストを使ったデータ共有（Context API）

親子関係が深くなると、Props を何階層も渡す必要があり面倒です。この場合 Context API を使うと便利です。

import { createContext, useContext, useState } from "react";

const UserContext = createContext();

function Display() {
  const user = useContext(UserContext);
  return <p>ユーザー: {user}</p>;
}

function App() {
  const [user] = useState("太郎");

  return (
    <UserContext.Provider value={user}>
      <Display />
    </UserContext.Provider>
  );
}
  • UserContext.Provider に値をセットすると、その子孫コンポーネントならどこでも useContext で取得可能
  • Props を何階層も渡す必要がない

5. 外部ライブラリを使った状態管理（Redux, Zustand など）

さらに大規模なアプリでは、グローバルに状態を管理するライブラリ を使うことが多いです。

  • Redux, Zustand, Recoil など
  • 複数のコンポーネントから同じ状態を直接読み書きできる
  • Context よりも高度な状態管理が可能

まとめ

  • 親から子へのデータ共有は Props
  • 子から親へは 関数を Props として渡す
  • 複数の子間で共有したいときは リフトアップ
  • 親子関係が深い場合は Context API
  • 大規模アプリでは 外部状態管理ライブラリ を検討