react コンポーネント 入れ子

はじめに

今回はReactの入れ子(ネスト構造)についてです。

入れ子を知ると、Reactは便利で良いライブラリだなーと思うようになります笑

よかったら、以下にReactについての記事も書きましたので見てやってください😎

React基礎

入れ子(ネスト構造)

Reactでは、入れ子(ネスト構造)を扱う場合、子コンポーネントが親コンポーネントの内部にレンダリングされる構造のことを指します。

入れ子(ネスト構造)を扱うことで、再利用性が高く、読みやすいコードを作成できるようになります。

入れ子の例

以下の例では、Parrentコンポーネントという親コンポーネントの中に、Childという子コンポーネントを複数表示する入れ子の構造となっています。

解説

1. Childコンポーネント

   子となるChildコンポーネントを定義しています。messageというpropsを受け取り、その内容を画面に表示しています。

2. Parentコンポーネント

   親となるコンポーネントを定義しています。この中でChildコンポーネント(子コンポーネント)を３つ並べて

   レンダリングし、それぞれ異なるmessageプロップスを渡しています。

3. Appコンポーネント

   App.jsでParentコンポーネントを呼び出し、画面に表示。

// Child.js
import React from 'react';

const Child = ({ message }) => {
  return <div>子コンポーネント: {message}</div>;
};

export default Child;

// Parent.js
import React from 'react';
import Child from './Child';

const Parent = () => {
  return (
    <div>
      <h1>親コンポーネント</h1>
      {/* 子コンポーネントを入れ子で配置 */}
      <Child message="こんにちは！" />
      <Child message="Reactの入れ子構造について学びましょう！" />
      <Child message="これが子コンポーネントです。" />
    </div>
  );
};

export default Parent;

// App.js
import React from 'react';
import Parent from './Parent';

const App = () => {
  return (
  <div>
      <Parent />
    </div>
  );
};

export default App;

実行結果

親コンポーネント
子コンポーネント: こんにちは！
子コンポーネント: Reactの入れ子構造について学びましょう！
子コンポーネント: これが子コンポーネントです。

ポイント

再利用性: Childコンポーネントを一度定義すると、　Parentコンポーネント内で何度も使いまわせる。

親子関係: Parent(親)は複数であるChild(子)を含み、それぞれデータ(message)を渡している。

管理のしやすさ: 子コンポーネントを別のファイルにすることでコードが見やすく、各コンポーネントが担当する部分が明確になる。