[TIL]10月1日Context-API,グローバルステータス

Propsについて
フォルダ構造の区分から、主にサブエレメントからprops、親エレメントから複数の使用に渡され、この部分では効率が悪いところがあります.
presenterファイルでindexで定義した関数を使用する場合は、次のpropsプロシージャを実行する必要があります.

props例(Index)

import PropsContainer from "./Props.container";
export default function PropsPage() {
  return (
  	<PropsContainer 
      	isProps={isProps}
      />
  )
}

props例(Container)

import PropsUI from "./Props.presenter";
export default function PropsContainer(props) {
  return (
  	<PropsUI 
      	isProps={props.isProps}
      />
  )
}

props例(presenter)

export default function PropsUI(props) {
  return (
    <div>
      {props.isProps}xxxx
    </div>
  );
}

presenterでindexで定義した内容を使用するには、このような不要な伝達プロセスが必要です.
このセクションがより複雑な場合は、手順を追加します.
ContextAPI?
サイトのページが増えるにつれて、stateの数も多くなり、管理するstateも多くなり、分散していると、stateの場所を探すのも難しくなります.
ContextAPIを使用すると、最上位の親要素が宣言した内容をスキップして使用できます.

ContextAPIの例(Index)

import ContextContainer from "../../../src/components/units/24-context-api/Context.container";
import { createContext } from "react";
export const MyContext = createContext(null);
export default function ContextPage() {
  const value = {
    isEdit: true,
  };
  return (
    <MyContext.Provider value={value}>
      <ContextContainer />
    </MyContext.Provider>
  );
}

ContextAPIの例(Container)

import ContextUI from "./Context.presenter";
export default function ContextContainer() {
  return <ContextUI></ContextUI>;
}

ContextAPIの例(Presenter)

import { useContext } from "react";
import { MyContext } from "../../../../pages/quiz/20-02-context";
export default function ContextUI() {
  const { isEdit } = useContext(MyContext);
  return <div>{isEdit ? "수정하기" : "등록하기"}</div>;
}

Context APIを使用すると、中間コンテンツをスキップし、プレゼンテーションでIndexの要素を使用できます.
親インデックスからreactからcreateContextをインポートし、変数に含めてエクスポートする方法を使用します.

import { createContext } from "react";
export const MyContext = createContext(null);

次にreturnの上部に渡す値を定義し、インポートしたサブ要素をラベルで囲みます.プロバイダに記入します.
(これは、サブエレメントに提供されることを意味するようです.)

export default function ContextPage() {
  const value = {
    isEdit: true,
  };
  return (
    <MyContext.Provider value={value}>
      <ContextContainer />
    </MyContext.Provider>
  );
}

受信ページでは、

import { useContext } from "react";
import { MyContext } from "../../../../pages/quiz/20-02-context";

2種類をインポートし、変数を宣言して使用すると有効になります.

export default function ContextUI() {
  const { isEdit } = useContext(MyContext);
  return <div>{isEdit ? "수정하기" : "등록하기"}</div>;
}

ContextAPIを適用します.jsに適用するとapp.jsは、すべてのstateを管理し、サブ要素に配布することができます.