React学習ログ No.3

Reactのstateとpropsについて

Reactでコンポーネントを作成する中で、入力値やカートの中身といった「状態」をコンポーネント自身に覚えておいてもらう必要が出てきた。
そのための仕組みが state と props。今回はこの2つについて整理する。

---

state：コンポーネントの状態を保持する仕組み

コンポーネント固有のメモリのようなもの。時間経過やユーザーの操作によって変化する値を保持しておくことができる。

なぜstateが必要か？

• 再レンダリングされない：変数の値が変わっても、Reactはそれを検知できず、画面表示が更新されない。
• 値がリセットされる：何かのきっかけで再レンダリングされると、変数の値は初期値に戻ってしまう。

この問題を解決するのが useState フック。

useState の基本的な使い方

useState は、コンポーネント内でstateを扱えるようにするReactの機能（フック）。
stateの値を更新すると、Reactが自動でコンポーネントを再レンダリングし、画面を最新の状態に更新してくれる。

補足：レンダリングとは
Reactがコンポーネントを呼び出し、UIを生成するプロセスのこと。
stateが更新されると、そのコンポーネントの再レンダリングがトリガーされる。

1️⃣ state の宣言

useState は、分割代入を使って以下のように宣言する。

const [state変数, setState関数] = useState(初期値);

✅ 具体例：

import { useState } from 'react';

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

• count：stateの現在の値を保持する変数。この例では初期値 0 が入る。
• setCount：countの値を更新するための専用の関数。

2️⃣ state の更新

stateを更新する際は、必ずset関数（この例ではsetCount）を使う必要がある。

// setCountを使って、countの値を1増やす
setCount(count + 1); // ✅ 必ずset関数経由で更新する

// count = count + 1;    // ❌ このように直接書き換えるのはNG

state変数を直接変更してしまうと、Reactが変更を検知できず再レンダリングが行われない。

---

props：親から子へデータを渡す仕組み

props（プロパティ）は、親コンポーネントから子コンポーネントへ、一方通行でデータを渡すための仕組み。

components/parent.jsx

import Child from './Child';

function Parent() {
  // Childコンポーネントに name="Geo" というデータを渡す
  return <Child name="Geo" />;
}

components/child.jsx

// 親から渡されたデータは、引数 `props` にオブジェクトとして格納される
function Child(props) {
  // props.name という形でデータを取り出す
  return <h2>こんにちは！私は {props.name} です</h2>;
}

これで、画面には「こんにちは！私は Geo です」と表示される。

特殊なprops children

propsの中でも少し特殊なのが children。
これは、コンポーネントをタグで囲んだ中身の要素が、そのままprops.childrenとして渡される仕組み。

例1：通常のprops (text)

textという名前でpropsを渡す場合。

function Box(props) {
  return <div className="box">{props.text}</div>;
}

function App() {
  return <Box text="ハロー" />;
}

例2：children を使う場合

<Box>と</Box>で囲まれた部分（<p>タグや<button>タグ）が、props.childrenとしてBoxコンポーネントに渡される。

function Box(props) {
  return <div className="box">{props.children}</div>;
}

function App() {
  return (
    <Box>
      <p>ハロー</p>
      <button>押してね</button>
    </Box>
  );
}