12.3. React Context API

はじめに

今日は、Reactアプリケーションでグローバルな状態を管理するのに役立つ強力な機能であるReact Context APIを学びましょう！GeekとGalが、楽しく魅力的な形でこの高度なコンセプトを説明し、初心者から上級者まで誰でも理解しやすくなっています！

React Context APIについて学ぶ準備はできてる？

もちろん！ReactのContext APIって何？

Context APIは、組み込みの機能で、手動でプロップを渡すことなく、コンポーネントツリー全体でデータを共有できるようになるの！グローバルな状態を管理するのに超便利なんだよ！🌟

React Context API

それはすごいね！Context APIってどうやって使うの？

まず、 React.createContext() を使ってコンテキストを作成するの。次に、 Context.Provider コンポーネントでコンポーネントツリーをラップし、共有したい状態を value プロップとして渡すのよ。例を見てみてね：


import React from 'react';



const ThemeContext = React.createContext();



class App extends React.Component {

  state = {

    theme: 'light',

  };



  toggleTheme = () => {

    this.setState((prevState) => ({

      theme: prevState.theme === 'light' ? 'dark' : 'light',

    }));

  };



  render() {

    return (

      <ThemeContext.Provider value={{ theme: this.state.theme, toggleTheme: this.toggleTheme }}>

        {/* Your component tree goes here */}

      </ThemeContext.Provider>

    );

  }

}

コンテキストを作成して、コンポーネントツリーを Context.Provider でラップし、状態を value プロップとして渡すんだね。子コンポーネントでこのデータにどうやってアクセスするの？

いい質問ね！ Context.Consumer コンポーネントや useContext フックを使って共有データにアクセスできるわ。 Context.Consumer を使った例を見てみて：


import React from 'react';

import ThemeContext from './ThemeContext';



class ThemedButton extends React.Component {

  render() {

    return (

      <ThemeContext.Consumer>

        {({ theme, toggleTheme }) => (

          <button onClick={toggleTheme} style={{ backgroundColor: theme === 'light' ? 'white' : 'black' }}>

            Toggle Theme

          </button>
        )}
      </ThemeContext.Consumer>
    );
  }
}

なるほど！ Context.Consumer か useContext フックを使って共有データにアクセスできるんだね。これでグローバル状態の管理がずっと簡単になるね！

その通り！React Context APIを使うと、グローバルな状態の管理がシンプルになり、コードがすっきりしてメンテナンスがしやすくなるわ！🎉

おわりに React Context APIは、アプリケーションでグローバルな状態を効率的に管理する方法です。コンテキストを使うことで、コンポーネント間でデータを簡単に共有でき、コードがより整理されてメンテナンスがしやすくなります！😄