Reactで柔軟なコンポーネント設計！Compound Componentsパターンをマスターしよう
目次
はじめに
Reactでは、コンポーネント設計が非常に重要です。今回紹介するCompound Componentsパターンは、コンポーネント間の関係を明確にし、再利用性を高めるための強力な手法です。
Compound Componentsパターンとは
Compound Componentsパターンは、親子コンポーネント間で柔軟に制御を行う設計パターンです。子コンポーネントは親コンポーネントからのプロパティを受け取り、個別に機能します。
Compound Componentsを使った例
Tabs.js
import React, { useState, createContext, useContext } from 'react';
const TabContext = createContext(); // コンテキストを作成
export const Tabs = ({ children }) => {
const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態
return (
<TabContext.Provider value={{ activeTab, setActiveTab }}>
<div>{children}</div> // 子コンポーネントをレンダリング
</TabContext.Provider>
);
};
export const Tab = ({ title, children }) => {
const { activeTab, setActiveTab } = useContext(TabContext); // 親コンポーネントからの状態を取得
const isActive = activeTab === title; // アクティブなタブか判定
return (
<div>
<button onClick={() => setActiveTab(title)}>{title}</button>
{isActive && <div>{children}</div>} // アクティブな場合のみコンテンツを表示
</div>
);
};
この例では、Tabsコンポーネントが親で、Tabコンポーネントが子です。親は現在のアクティブなタブを状態として保持し、子にコンテキストを通じて渡します。子コンポーネントはアクティブなタブかどうかを判定し、内容を表示します。
Compound Componentsを使わない例
Tabs.js
import React, { useState } from 'react';
export const Tabs = ({ titles, children }) => {
const [activeTab, setActiveTab] = useState(0); // アクティブなタブの状態
return (
<div>
{titles.map((title, index) => (
<button onClick={() => setActiveTab(index)} key={index}>
{title}
</button>
))}
{children[activeTab]} // アクティブなタブのコンテンツを表示
</div>
);
};
この設計では、タブのタイトルと内容が分離されており、Tabsコンポーネントが全てのロジックを制御します。子コンポーネントは単に表示されるだけで、独立した存在ではありません。
対比とメリット
- 柔軟性: Compound Componentsを使用すると、より柔軟な設計が可能。
- 再利用性: 各子コンポーネントが独立しているため、再利用しやすい。
- 可読性: コンポーネントの関係が明確で、コードの可読性が向上。
- メンテナンス: メンテナンスが容易。
まとめ
Compound Componentsパターンは、Reactのコンポーネント設計を向上させる素晴らしい手法です。この記事を通じて、この強力なパターンをマスターし、より洗練されたReactアプリケーションの開発を進めてください！
いいねやシェアは、今後の記事作成の励みになります。感想や質問があれば、コメント欄にお気軽にどうぞ！