MENU
  1. ホーム
  2. React
  3. Reactで子コンポーネントの状態を親コンポーネントで完全に制御する方法

Reactで子コンポーネントの状態を親コンポーネントで完全に制御する方法

React

Reactでの状態管理は、アプリケーションの構造を決定づける重要な要素です。特に、子コンポーネントが独自に状態を持つ場合、親コンポーネントとの連携が必要になる場面が多くあります。しかし、子コンポーネントの状態を親コンポーネントが制御するのは簡単ではありません。この課題を解決することで、状態の一貫性を保ち、コードの可読性や保守性を向上させることができます。本記事では、Reactを用いて子コンポーネントの状態を親コンポーネントで完全に制御する方法を、具体的な例を交えながら詳しく解説します。

目次

子コンポーネントの状態管理の基本


Reactにおいて、子コンポーネントが独自に状態を管理するケースはよくあります。これにより、コンポーネントの再利用性や独立性が向上します。子コンポーネントの状態は、通常useStateフックを使って管理され、コンポーネント内部のロジックに直接影響を与えるため、UIの操作性を大幅に改善できます。

状態管理の基本的な仕組み


子コンポーネントでは、以下のように状態を定義し、更新できます。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

このコードでは、countが状態であり、setCount関数を使って状態を更新します。

独立した状態管理の利点

  • ロジックのカプセル化: 子コンポーネントは状態を独自に管理するため、外部からの干渉を受けにくくなります。
  • 再利用性: 状態管理を含むロジックを個別のコンポーネントにまとめることで、同じ機能を他の場所で再利用可能です。

課題


子コンポーネントが独立して状態を管理する場合、親コンポーネントとの連携が難しくなることがあります。たとえば、親が子の状態をリアルタイムで知る必要がある場合や、複数の子コンポーネント間で状態を共有したい場合、個別の状態管理では対応しきれない場合があります。

こうした課題を解決するために、親コンポーネントが状態管理を行う手法を次に解説します。

親コンポーネントで子コンポーネントの状態を管理するメリット

Reactでアプリケーションを開発する際、親コンポーネントで子コンポーネントの状態を管理する方法は、状態の一貫性やデータの流れを明確にするための効果的な手法です。このアプローチには、以下のようなメリットがあります。

メリット1: 状態の一元管理


親コンポーネントで状態を一元管理することで、アプリケーション全体の状態を簡単に把握できます。これにより、データフローが直線的になり、コードのデバッグやテストが容易になります。

import React, { useState } from 'react';

function ParentComponent() {
  const [childState, setChildState] = useState(0);

  return (
    <div>
      <ChildComponent value={childState} onChange={setChildState} />
      <p>Parent knows: {childState}</p>
    </div>
  );
}

function ChildComponent({ value, onChange }) {
  return (
    <div>
      <p>Child state: {value}</p>
      <button onClick={() => onChange(value + 1)}>Increment</button>
    </div>
  );
}

この例では、ParentComponentが子コンポーネントの状態を完全に制御しています。

メリット2: 状態の共有が容易


親コンポーネントで状態を管理することで、複数の子コンポーネント間で状態を簡単に共有できます。これにより、アプリケーション内で一貫したUIや動作を実現可能です。

メリット3: 状態の同期性を保証


親コンポーネントが状態を管理することで、親子間のデータの同期が保証されます。例えば、親コンポーネントで状態を更新すれば、子コンポーネントの表示にも即座に反映されます。

メリット4: グローバルステートを減らせる


親コンポーネントで状態を管理することで、ReduxやContext APIなどのグローバルステート管理を導入せずに小規模な状態管理が可能です。これにより、アプリケーションの複雑性を抑えつつ必要な機能を実現できます。

注意点


親コンポーネントに過度に多くの責任を持たせると、コードが煩雑になり、メンテナンス性が低下するリスクがあります。これを防ぐため、状態管理を効率化する手法を次に解説します。

Propsを使った双方向の状態管理

Reactでは、親コンポーネントが子コンポーネントの状態を制御する際にPropsを活用します。Propsを介して親から子にデータを渡すと同時に、子から親にデータを返す仕組みを組み合わせることで、双方向の状態管理を実現できます。

Propsによるデータの流れ


Reactでは、データの流れが「親から子」への一方向であるため、状態管理に関する主導権は親コンポーネントにあります。これにより、アプリケーションの状態がどこで管理されているか明確になります。

以下は基本的なPropsの使用例です：

import React, { useState } from 'react';

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <div>
      <ChildComponent value={value} onChange={setValue} />
      <p>Parent Value: {value}</p>
    </div>
  );
}

function ChildComponent({ value, onChange }) {
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

この例では、親コンポーネントがvalueを管理し、子コンポーネントはその状態を参照・更新できます。

双方向の状態管理を実現する方法


双方向の状態管理では、以下の手順を実行します：

  1. 親コンポーネントで状態を定義し、useStateで管理します。
  2. 親コンポーネントから、状態と更新関数を子コンポーネントにPropsとして渡します。
  3. 子コンポーネントはPropsとして受け取ったデータを表示し、ユーザー操作をトリガーに更新関数を呼び出します。

例: カウンターコンポーネント

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

  return (
    <div>
      <ChildComponent count={count} onIncrement={() => setCount(count + 1)} />
      <p>Total Count: {count}</p>
    </div>
  );
}

function ChildComponent({ count, onIncrement }) {
  return (
    <div>
      <p>Count in Child: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

このコードでは、countの状態を親が管理し、子がその状態を利用してボタンの操作で状態を更新します。

Propsを使う際の注意点

  • 子コンポーネントが多くなると、Propsの受け渡しが複雑化する可能性があります（いわゆる「Propsドリリング」問題）。
  • 状態管理が深いネストを持つ場合、Context APIなどの追加ツールを検討すると良いでしょう。

Propsを活用した基本的な状態管理を理解することで、Reactのコンポーネント間の連携をスムーズに行えるようになります。次に、さらに効率的な状態管理の方法を探っていきます。

状態管理を効率化する方法：Callback関数の活用

親コンポーネントで状態を管理する際、子コンポーネントから親コンポーネントの状態を更新する必要が生じることがあります。このとき、Callback関数を利用することで、効率的で明確な状態管理を実現できます。

Callback関数とは


Callback関数とは、関数の引数として渡される関数のことです。Reactでは、親コンポーネントが定義した関数を子コンポーネントに渡すことで、子コンポーネントから親コンポーネントの状態を間接的に操作できます。

Callback関数を使った状態更新の基本例


以下は、Callback関数を用いて親の状態を子が操作する例です：

import React, { useState } from 'react';

function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent onMessageChange={handleMessageChange} />
      <p>Parent Message: {message}</p>
    </div>
  );
}

function ChildComponent({ onMessageChange }) {
  return (
    <div>
      <input
        type="text"
        onChange={(e) => onMessageChange(e.target.value)}
        placeholder="Type a message"
      />
    </div>
  );
}

この例では、親コンポーネントのhandleMessageChange関数を子コンポーネントに渡し、子から親の状態を変更しています。

メリット

  • 親子間の明確な責任分担: 親が状態を管理し、子はその更新ロジックを呼び出す役割に限定されます。
  • 状態管理の効率化: 状態の変更ロジックを親に集中させることで、コードの一貫性が向上します。
  • 柔軟な拡張性: 親の状態変更ロジックを簡単に修正できるため、後々の機能拡張が容易です。

複数の状態を管理する場合の例


以下は、複数の状態を管理するシナリオです：

function ParentComponent() {
  const [formState, setFormState] = useState({ name: '', email: '' });

  const handleFormChange = (key, value) => {
    setFormState((prev) => ({ ...prev, [key]: value }));
  };

  return (
    <div>
      <ChildComponent
        name={formState.name}
        email={formState.email}
        onFormChange={handleFormChange}
      />
      <p>
        Name: {formState.name}, Email: {formState.email}
      </p>
    </div>
  );
}

function ChildComponent({ name, email, onFormChange }) {
  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => onFormChange('name', e.target.value)}
        placeholder="Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => onFormChange('email', e.target.value)}
        placeholder="Email"
      />
    </div>
  );
}

この例では、フォームの状態がオブジェクトとして管理され、onFormChangeを用いることで効率的に更新されています。

Callback関数の注意点

  • 状態管理が複雑になる場合、useReducerや状態管理ライブラリの活用を検討するべきです。
  • ネストが深くなると、コードが見づらくなるため、必要に応じてロジックを分割してください。

Callback関数は、親子間の状態管理を効率化する基本的なツールであり、他の管理方法との組み合わせでさらに強力に機能します。次は、状態管理で直面する課題とその解決策を考察します。

状態管理の課題と解決策

Reactアプリケーションの状態管理は、アプリケーションの規模や複雑さに応じて課題が増えることがあります。特に親子コンポーネント間での状態のやり取りが複雑化する場合、コードの保守性や可読性が低下するリスクがあります。本セクションでは、状態管理における代表的な課題と、その解決策を解説します。

課題1: Propsドリリングの問題


問題
親コンポーネントから状態や関数をPropsとして渡す際、深いネストがあると複数の中間コンポーネントを経由して渡す必要が生じます（これを「Propsドリリング」と呼びます）。これにより、コードが冗長になり、メンテナンスが難しくなります。

解決策

  • Context APIの利用
    Context APIを使えば、ネストされたコンポーネント間でPropsを直接渡す必要がなくなり、グローバルな状態共有が可能になります。
import React, { createContext, useState, useContext } from 'react';

const StateContext = createContext();

function ParentComponent() {
  const [state, setState] = useState('Hello');

  return (
    <StateContext.Provider value={{ state, setState }}>
      <ChildComponent />
    </StateContext.Provider>
  );
}

function ChildComponent() {
  const { state, setState } = useContext(StateContext);

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={() => setState('Updated!')}>Update State</button>
    </div>
  );
}
  • 状態管理ライブラリの導入
    ReduxやMobXなどの状態管理ライブラリを使用することで、大規模なアプリケーションでも効率的に状態を管理できます。

課題2: 複雑な状態更新ロジック


問題
複数の状態が相互に依存する場合、状態更新ロジックが複雑化し、バグが発生しやすくなります。

解決策

  • useReducerの利用
    状態更新ロジックをuseReducerで整理することで、複雑なロジックをわかりやすく管理できます。
import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

課題3: パフォーマンスの低下


問題
親コンポーネントが頻繁に再レンダリングされると、子コンポーネントまで不要に再レンダリングされ、パフォーマンスが低下します。

解決策

  • React.memoの利用
    コンポーネントの再レンダリングを制御するためにReact.memoを活用します。
import React, { useState, memo } from 'react';

const ChildComponent = memo(({ value }) => {
  console.log('ChildComponent rendered');
  return <p>Value: {value}</p>;
});

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <ChildComponent value={value} />
    </div>
  );
}
  • useCallbackの利用
    関数の再生成を防ぐためにuseCallbackを活用します。

課題4: 状態のスケーラビリティ


問題
アプリケーションが拡大するにつれて、状態管理がスケーラブルでなくなることがあります。

解決策

  • 状態管理を分割して、コンポーネントごとに適切なスコープを持たせる。
  • 必要に応じてReduxやRecoilなどのツールを使用し、状態管理を体系化する。

状態管理の課題を適切に解決することで、アプリケーションの効率と安定性を向上させることができます。次は、React Hooksを使った実践的な状態管理手法を見ていきます。

React Hooksを用いた親子間の状態管理

React Hooksは、状態管理をより簡単かつ効率的にするための便利なツールです。特にuseStateやuseEffectを活用することで、親子コンポーネント間の状態を動的に管理できます。本セクションでは、React Hooksを使った親子間の状態管理の基本と応用を解説します。

useStateを使った親子間の状態管理


useStateは、親コンポーネントで状態を管理し、子コンポーネントにPropsとして渡す際に最も基本的な方法です。以下の例は、親コンポーネントが子コンポーネントの状態を制御するシナリオを示しています。

import React, { useState } from 'react';

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <div>
      <ChildComponent value={value} onChange={(newValue) => setValue(newValue)} />
      <p>Parent value: {value}</p>
    </div>
  );
}

function ChildComponent({ value, onChange }) {
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

このコードでは、親コンポーネントがvalueの状態を持ち、子コンポーネントがその状態を参照・更新します。

useEffectを使った副作用の管理


useEffectを使えば、親コンポーネントが子コンポーネントの状態に応じて動作を変更するなど、副作用を簡単に管理できます。以下は、子コンポーネントの状態を親で監視する例です。

import React, { useState, useEffect } from 'react';

function ParentComponent() {
  const [childValue, setChildValue] = useState('');
  const [status, setStatus] = useState('Waiting for input...');

  useEffect(() => {
    if (childValue) {
      setStatus(`Input received: ${childValue}`);
    } else {
      setStatus('Waiting for input...');
    }
  }, [childValue]);

  return (
    <div>
      <ChildComponent value={childValue} onChange={setChildValue} />
      <p>Status: {status}</p>
    </div>
  );
}

function ChildComponent({ value, onChange }) {
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

この例では、親コンポーネントが子の入力内容に基づいてstatusを更新しています。

useCallbackを使った最適化


親子間で頻繁に再レンダリングが発生する場合、useCallbackを活用することでパフォーマンスを最適化できます。

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [value, setValue] = useState('');

  const handleChange = useCallback((newValue) => {
    setValue(newValue);
  }, []);

  return (
    <div>
      <ChildComponent value={value} onChange={handleChange} />
    </div>
  );
}

function ChildComponent({ value, onChange }) {
  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

このコードでは、親コンポーネントが定義するhandleChange関数が再生成されないため、無駄な再レンダリングを防ぐことができます。

React Hooksの活用ポイント

  1. シンプルな状態管理にはuseState
    単一の値や基本的な更新ロジックにはuseStateが最適です。
  2. 状態の監視や副作用の処理にはuseEffect
    データフェッチやログ出力など、状態の変化に応じた処理を記述できます。
  3. 最適化にはuseCallbackとuseMemo
    重い処理や頻繁な再レンダリングが発生する場合に使用します。

React Hooksを活用することで、親子間の状態管理を簡潔かつ効率的に行うことができます。次は、Context APIを用いてさらにスケーラブルな状態管理方法を解説します。

Context APIを活用したスケールアップ

アプリケーションが複雑になると、親から子へのPropsの受け渡しが増え、管理が難しくなる「Propsドリリング」の問題が発生します。これを解決するために、ReactのContext APIを活用すると、スケーラブルで効率的な状態管理が可能になります。本セクションでは、Context APIの基本概念から具体的な実装方法、そして応用例までを解説します。

Context APIの基本


Context APIは、Reactでグローバルに状態やデータを共有するための仕組みです。特定の状態をツリー全体で共有できるため、深いネストがあっても直接データを取得可能です。

Contextの主な構成要素

  1. Contextの作成: React.createContextでコンテキストを作成します。
  2. Providerの定義: コンポーネントツリーにデータを供給します。
  3. Consumerの利用: 必要なコンポーネントでデータを取得します。

基本的なContext APIの例

以下は、Contextを利用して親子間でデータを共有する例です。

import React, { createContext, useState, useContext } from 'react';

// Contextの作成
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemeSwitcher />
    </div>
  );
}

function ThemeSwitcher() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

export default App;

動作概要

  1. ThemeContextがアプリ全体でテーマ情報を共有します。
  2. ThemeSwitcherはuseContextで現在のテーマを取得し、ボタンで切り替えます。

Context APIの応用例


Context APIは単なる状態共有だけでなく、以下のような複雑なケースにも対応できます：

ケース1: 認証状態の管理


アプリ全体でユーザーのログイン状態を共有するためにContextを使用します。

const AuthContext = createContext();

function AuthProvider({ children }) {
  const [isAuthenticated, setAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

function LoginButton() {
  const { isAuthenticated, setAuthenticated } = useContext(AuthContext);

  return (
    <button onClick={() => setAuthenticated(!isAuthenticated)}>
      {isAuthenticated ? 'Logout' : 'Login'}
    </button>
  );
}

ケース2: 複数のContextの統合


複数のコンテキストを組み合わせて使うことで、異なるデータを管理できます。

const UserContext = createContext();
const ThemeContext = createContext();

function App() {
  return (
    <UserContext.Provider value={{ name: 'John' }}>
      <ThemeContext.Provider value="dark">
        <Dashboard />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);

  return (
    <p>
      User: {user.name}, Theme: {theme}
    </p>
  );
}

Context APIを使う際の注意点

  • 頻繁に変更されるデータには不向き
    高頻度で変更されるデータはContextを通じて共有するとパフォーマンスが低下します。必要に応じてReduxやRecoilを検討してください。
  • ネスト構造の管理
    複数のProviderを使う場合、深いネストが発生しやすいため、Provider専用のコンポーネントを作成すると良いでしょう。

Context APIは、中規模から大規模なアプリケーションにおける状態管理に非常に効果的です。次は、この状態管理手法を具体的な実例（フォーム入力の親子状態管理）に適用する方法を見ていきます。

応用例：フォーム入力の親子状態管理

Reactでのフォーム入力は、親子コンポーネント間で状態をやり取りする実践的なシナリオです。フォーム要素ごとに子コンポーネントを分割しつつ、親コンポーネントで状態を一元管理することで、拡張性の高い設計が可能になります。ここでは、フォームの親子状態管理を具体的なコードで解説します。

シンプルなフォームの親子状態管理


以下は、親コンポーネントが入力データを管理し、子コンポーネントが入力フィールドを提供する例です。

import React, { useState } from 'react';

function ParentForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const handleChange = (key, value) => {
    setFormData((prevData) => ({ ...prevData, [key]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Data:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <ChildInput
        label="Name"
        value={formData.name}
        onChange={(value) => handleChange('name', value)}
      />
      <ChildInput
        label="Email"
        value={formData.email}
        onChange={(value) => handleChange('email', value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

function ChildInput({ label, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

export default ParentForm;

動作説明

  1. 親コンポーネント（ParentForm）が状態formDataを一元管理します。
  2. 各子コンポーネント（ChildInput）は、親から渡された値を表示し、変更を親に通知します。
  3. 入力内容が変更されるたびにhandleChangeが呼び出され、状態が更新されます。

複雑なフォームの状態管理


複雑なフォームでは、Context APIを活用してフォーム全体の状態を管理することが効果的です。

import React, { createContext, useContext, useState } from 'react';

const FormContext = createContext();

function FormProvider({ children }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: '',
  });

  const handleChange = (key, value) => {
    setFormData((prevData) => ({ ...prevData, [key]: value }));
  };

  return (
    <FormContext.Provider value={{ formData, handleChange }}>
      {children}
    </FormContext.Provider>
  );
}

function ParentForm() {
  return (
    <FormProvider>
      <form>
        <ChildInput label="Name" field="name" />
        <ChildInput label="Email" field="email" />
        <ChildInput label="Age" field="age" />
        <SubmitButton />
      </form>
    </FormProvider>
  );
}

function ChildInput({ label, field }) {
  const { formData, handleChange } = useContext(FormContext);

  return (
    <div>
      <label>{label}</label>
      <input
        type="text"
        value={formData[field]}
        onChange={(e) => handleChange(field, e.target.value)}
      />
    </div>
  );
}

function SubmitButton() {
  const { formData } = useContext(FormContext);

  const handleSubmit = () => {
    console.log('Submitted Data:', formData);
  };

  return <button type="button" onClick={handleSubmit}>Submit</button>;
}

export default ParentForm;

Contextを利用するメリット

  • 状態管理の分離: 状態管理ロジックをFormProviderに集約し、各コンポーネントはデータ取得・操作に専念できます。
  • 再利用性の向上: 同じFormProviderを利用して、異なるフォーム構造に対応可能です。

リアルタイムの入力バリデーション


フォームでは、入力中にリアルタイムでバリデーションを行う必要がある場合があります。以下の例では、入力内容の妥当性をチェックしています。

function ChildInput({ label, field, validationFn }) {
  const { formData, handleChange } = useContext(FormContext);
  const [error, setError] = useState('');

  const handleInputChange = (value) => {
    handleChange(field, value);
    setError(validationFn(value) ? '' : 'Invalid input');
  };

  return (
    <div>
      <label>{label}</label>
      <input
        type="text"
        value={formData[field]}
        onChange={(e) => handleInputChange(e.target.value)}
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </div>
  );
}

例: バリデーション関数

const isNotEmpty = (value) => value.trim() !== '';

まとめ


フォームの親子状態管理では、単純なPropsの受け渡しからContext APIの利用まで、状況に応じて適切な方法を選択できます。リアルタイムバリデーションなどの追加機能も簡単に統合できるため、堅牢で使いやすいフォームを構築できます。次は、この記事の内容をまとめます。

まとめ

本記事では、Reactにおける親コンポーネントで子コンポーネントの状態を完全に制御する方法について解説しました。Propsを利用した基本的な状態管理から、Callback関数、React Hooks、Context APIを活用した効率的な管理方法、そしてフォーム入力の具体例までを幅広く取り上げました。

親が状態を管理することで、データの一貫性を保ち、複雑な状態を整理することができます。また、Context APIやHooksを使うことで、規模が大きなアプリケーションでも柔軟で拡張性の高い設計が可能です。適切な手法を選択し、Reactでの状態管理を最大限に活用してください。

React
React 状態管理 子コンポーネント

コメント

コメントする

目次