1. コンポーネント再利用とは何か

コンポーネント再利用とは、一度作った部品を何度も使うことです。 Reactでは、画面を小さな部品の集まりとして考えます。

例えば、ボタンや見出しは多くの画面で登場します。それを毎回書くのではなく、一つ作って使い回すことで、作業量が減りミスも少なくなります。これは、同じ形のブロックを組み立てて家を作る感覚に近いです。

2. 再利用しやすいコンポーネントの特徴

再利用しやすいコンポーネントは、役割が一つに絞られています。一つの部品が多くの仕事をすると、他で使いにくくなります。

表示だけを担当する、クリックを受け取るだけなど、できるだけシンプルな役割にするのがポイントです。初心者の方は、「この部品は何をするものか」を一言で言えるか考えてみてください。

3. propsを使って柔軟に使い回す

propsとは、コンポーネントに渡す情報のことです。同じ部品でも、渡す情報を変えることで見た目や内容を変えられます。


import React from "react";

function TextLabel({ text }) {
  return <p>{text}</p>;
}

export default TextLabel;

（文字を受け取り、好きな内容を表示できます）

このように作ると、表示する文章だけを変えて何度でも使えます。再利用の基本は、propsで差し替えられる部分を作ることです。

4. 見た目だけのコンポーネントを作る

再利用性を高めるためには、見た目専用のコンポーネントを作るのが効果的です。中で難しい処理をしないことで、どこでも安心して使えます。


import React from "react";

function Card({ children }) {
  return (
    <div className="card p-3">
      {children}
    </div>
  );
}

export default Card;

（中身を自由に入れ替えられる枠として使えます）

childrenとは、コンポーネントの中に書いた内容のことです。箱だけを用意して、中身は使う側に任せる考え方は、再利用でよく使われます。

5. 状態を持たせすぎないのがコツ

状態とは、数値や文字など変化するデータのことです。再利用する部品には、できるだけ状態を持たせない方が使いやすくなります。

状態が多いと、使う場所ごとに動きを理解する必要が出てきます。状態管理は親のコンポーネントに任せ、部品は表示に集中させるのが基本です。

6. ロジックと表示を分ける考え方

ロジックとは、計算や判断などの処理部分です。表示とロジックを分けることで、再利用しやすくなります。


import React, { useState } from "react";

function CounterLogic() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}

export default CounterLogic;

（数値の管理だけを担当する仕組みです）

このように役割を分けると、表示方法を変えても同じ仕組みを使えます。大きなアプリほど、この分離が効果を発揮します。