Context APIを使用したグローバル値の管理


  • の値は、素子F、Jに表示され、この値を変更するイベントが素子Gに発生する.
  • この場合、value値およびhandleSetValue関数はpropsとしてサブアセンブリに渡される.
    - value : Root -> A -> B -> F
  • value : Root -> H -> J
    -HandleSetValue:Root->A->B->E->G
  • プロジェクトの規模が拡大するにつれて、コンポーネントの深さが深くなり、処理されるデータ量が大きくなる可能性があるため、メンテナンスが困難になる.

  • ContextSample.js
    import React, { createContext, useContext } from "react";
    
    function Child({ text }) {
      return <div>안녕하세요? {text}</div>;
    }
    
    function Parent({ text }) {
      return <Child text={text} />;
    }
    
    function GrandParent({ text }) {
      return <Parent text={text} />;
    }
    
    function ContextSample() {
      return <GrandParent text="Good" />;
    }
    
    export default ContextSample;
    *Contextの適用
    import React, { createContext, useContext } from "react";
    
    // context에서 사용할 기본값 설정
    const MyContext = createContext("defaultValue");
    
    function Child() {
      const text = useContext(MyContext);
      return <div>안녕하세요? {text}</div>;
    }
    
    function Parent() {
      return <Child />;
    }
    
    function GrandParent() {
      return <Parent />;
    }
    
    function ContextSample() {
      return (
        <MyContext.Provider value="Good">
          <GrandParent />
        </MyContext.Provider>
      );
    }
    
    export default ContextSample;
  • useContext:React内蔵Hook
  • コンテキスト内の値を読み込む
  • MyContextに値を指定する場合は、コンテキストの最上位レベル(ContextSample)でコンテキスト内部のProviderコンポーネントを使用する必要があります.
  • コンテキストを作成する場合、createContext関数を使用してパラメータを渡し、プロバイダコンポーネントを使用しない場合にデフォルトになります.
  • Providerの値で渡される値がコンテキストの値となります.
  • 実習

  • の前に、ユーザリストを介してonToggleまたはonRemoveイベントをユーザコンポーネントに渡すようにユーザリストに要求される不要な動作がある.
    -解決策1.contextでonToggleとonRemoveを直接入れます.
  • 解決方法2.dispatchのみを入れる方法
  • UserDispatchという名前のコンテキストを作成します.デフォルト値は必要ないのでnullを追加します.
  • UserDispatchの値は、UserReducerとして受信したDispatchとして指定されます.
  • 既存のアプリケーション.jsのonToggleとonRemoveを削除します.
  • ユーザーリストのonToggle、onRemoveを削除し、ユーザー内部にonRemove、onToggleを作成します.(useContext Hook利用)
  • App.jsからUserDispatchをインポートし、dispatchを使用するコンテキストを作成します.
  • リファレンス


    https://velopert.com/3606