【React入門】親子コンポーネント・useState・props・useEffect・ルーティング・レンダリングについて

#### Reactを学び始めた方向けに、以下の内容をまとめました。

- 親コンポーネントと子コンポーネントの概念  
- `useState`, `props`, `useEffect`について  
- ルーティングの基本  
- レンダリングとは何か  

簡易的なコード付きで解説していきます。

---

## 1. 親コンポーネントと子コンポーネントの関係

Reactでは、コンポーネントを分割して再利用するのが基本です。親コンポーネントから子コンポーネントへ `props` を使ってデータを渡します。

```jsx
// ChildComponent.jsx
// propsとして渡されたmessageを表示するシンプルな子コンポーネント
export default function ChildComponent({ message }) {
  return <p>子コンポーネント: {message}</p>;
}
```

```jsx
// ParentComponent.jsx
// 親コンポーネントから子コンポーネントにデータを渡す
import React from "react";
import ChildComponent from "./ChildComponent";

export default function ParentComponent() {
  return (
    <div>
      <h1>親コンポーネント</h1>
      {/* 子コンポーネントに"こんにちは！"という文字列を渡す */}
      <ChildComponent message="こんにちは！" />
    </div>
  );
}
```

---

## 2. useState：状態を管理する

`useState` は React の基本的なフックの1つで、コンポーネント内で状態を管理できます。

```jsx
import React, { useState } from "react";

export default function Counter() {
  // count: 現在の状態の値
  // setCount: 状態を更新する関数
  const [count, setCount] = useState(0); // 初期値は0

  return (
    <div>
      <p>カウント: {count}</p>
      {/* ボタンをクリックするとcountが1増える */}
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}
```

---

## 3. props：親から子へデータを渡す

親コンポーネントから子コンポーネントにデータを渡すには `props` を使います。

```jsx
// 親でこう書くと:
<ChildComponent message="こんにちは！" />
```

```jsx
// 子コンポーネントでこう受け取れる:
function ChildComponent({ message }) {
  return <p>{message}</p>; // "こんにちは！"が表示される
}
```

---

## 4. useEffect：副作用の処理

`useEffect` は副作用（API通信、DOM操作、タイマーなど）を行いたいときに使います。

```jsx
import React, { useState, useEffect } from "react";

export default function Timer() {
  const [seconds, setSeconds] = useState(0); // 経過秒数を管理

  useEffect(() => {
    // 1秒ごとにsecondsを1ずつ増やす
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // コンポーネントがアンマウントされたときにタイマーを止める
    return () => clearInterval(interval);
  }, []); // 空配列：マウント時に1回だけ実行

  return <p>{seconds}秒経過</p>;
}
```

---

## 5. React Routerでルーティングする

画面遷移には `react-router-dom` を使います。まずはインストール。

```bash
npm install react-router-dom
```

基本的な使い方はこちら：

```jsx
// App.jsx
// ルーティングの設定を行うコンポーネント
import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

export default function App() {
  return (
    <BrowserRouter>
      {/* ナビゲーションリンク */}
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      {/* ルーティングの定義 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}
```

```jsx
// Home.jsx
// ホームページ用のコンポーネント
export default function Home() {
  return <h2>ホームページ</h2>;
}
```

```jsx
// About.jsx
// アバウトページ用のコンポーネント
export default function About() {
  return <h2>アバウトページ</h2>;
}
```

---

## 6. レンダリングとは？

**レンダリング**とは、Reactがコンポーネントの内容を画面に描画する処理のことです。

- **初回レンダリング**：コンポーネントが初めて表示されるとき  
- **再レンダリング**：`useState`の値が更新されたときなど、状態の変化によって画面が再描画される  

以下のように、ボタンで状態を変更すると再レンダリングが発生します。

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

// ボタンをクリックするたびにcountが更新され、再レンダリングが発生
<button onClick={() => setCount(count + 1)}>カウント</button>
```

---

## まとめ

Reactの基本をざっくりと振り返りました。

| 概念               | 目的                     |
|--------------------|--------------------------|
| 親子コンポーネント | UIの分割と再利用         |
| `useState`         | 状態管理                 |
| `props`            | 親→子へのデータ渡し      |
| `useEffect`        | 副作用の処理             |
| ルーティング       | ページ遷移               |
| レンダリング       | 画面描画の仕組み         |

---