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

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

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

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

---

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

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

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

// 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つで、コンポーネント内で状態を管理できます。

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 を使います。

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

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

---

4. useEffect：副作用の処理

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

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 を使います。まずはインストール。

npm install react-router-dom

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

// 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>
  );
}

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

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

---

6. レンダリングとは？

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

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

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

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

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

---

まとめ

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

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

---