PropsとStateの違い

React 入門：Props と State の違い

React を学び始めると、必ず登場する重要な概念が Props（プロップス） と State（ステート） です。どちらもコンポーネントが扱う「データ」に関係していますが、その役割や使い方には明確な違いがあります。今回は、この二つの概念を整理して理解しやすい形で紹介します。

Props とは？

Props（Properties の略） は、親コンポーネントから子コンポーネントに渡す「入力データ」です。
HTML でいうと、タグに設定する属性（例：<img src="..." alt="..."> の src や alt）に近いイメージです。

特徴

• 外部から渡される値（親から子へ一方向に流れる）
• 読み取り専用（コンポーネント内で変更できない）
• 再利用性を高める（同じコンポーネントに異なる値を渡して使える）

サンプルコード

function Greeting(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

// 利用例
<Greeting name="太郎" />
<Greeting name="花子" />

結果として「こんにちは、太郎さん！」「こんにちは、花子さん！」が表示されます。
同じコンポーネントでも、props が異なれば出力も変わるわけです。

State とは？

一方で State は、そのコンポーネント自身が持つ「内部データ」です。
ユーザーの操作や時間の経過などで変化する値を保持し、変更されるとコンポーネントが再レンダーされます。

特徴

• コンポーネント内部で管理されるデータ
• 変更可能（setState や useState を使って更新）
• UI の変化を表現するのに使われる

サンプルコード

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>＋1</button>
    </div>
  );
}

ボタンをクリックするたびに count が更新され、その結果が即座に画面に反映されます。

Props と State の違いまとめ

Props と State を組み合わせる

実際のアプリ開発では、Props と State は単独で使うよりも、組み合わせて使う場面が多いです。
例えば、親コンポーネントがデータを管理し、その一部を Props として子に渡し、子は State を使って UI を操作するといった流れです。

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

  return <Greeting name={user} />;
}

このように「親が持つ State を Props として子に渡す」という流れは React アプリの基本的なデータの流れです。

まとめ

• Props は「親から子への入力データ」、読み取り専用。
• State は「コンポーネント内部で持つ状態」、変更可能で UI を動的に変える。
• この二つを理解することで、React アプリのデータの流れがぐっとわかりやすくなります。