REACT Context (HOOK全記録の章既に紹介した)

REACT Context

React Context は、React アプリケーションでグローバルにデータを共有するための方法です。これにより、プロパティを一つ一つ手動で渡すことなく、コンポーネントツリーの深くまでデータを渡すことができます。

以下に、React Context を使用する基本的な方法を説明します。

React Context の作成

まず、Context を作成します。以下の例では、UserContext を作成し、ユーザー情報をグローバルに共有します。

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

// Context の作成
export const UserContext = createContext();

// Provider コンポーネント
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: 'John Doe', age: 30 });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

Context Provider の使用

次に、Context Provider を使用して、アプリケーション全体または特定の部分にデータを提供します。

import React from 'react';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';
import UserSettings from './UserSettings';

function App() {
  return (
    <UserProvider>
      <div>
        <h1>React Context Example</h1>
        <UserProfile />
        <UserSettings />
      </div>
    </UserProvider>
  );
}

export default App;

Context の使用

最後に、Context を使用してデータを取得します。useContext フックを使用して、Context にアクセスします。

UserProfile

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const UserProfile = () => {
  const { user } = useContext(UserContext);

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
};

export default UserProfile;

UserSettings

import React, { useContext } from 'react';
import { UserContext } from './UserContext';

const UserSettings = () => {
  const { user, setUser } = useContext(UserContext);

  const handleNameChange = (e) => {
    setUser({ ...user, name: e.target.value });
  };

  return (
    <div>
      <h2>User Settings</h2>
      <input
        type="text"
        value={user.name}
        onChange={handleNameChange}
      />
    </div>
  );
};

export default UserSettings;

React Context は、プロパティドリリング（props drilling）を回避し、コンポーネント間でデータを効率的に共有するのに非常に便利です。Context を使用することで、グローバルな状態管理が簡単になり、コードの可読性とメンテナンス性が向上します。