useContext(typescript)のクリア

usereducerに続いて、userContextも学びました.
useContextを言語で説明するのはちょっと難しいかもしれません.絵で説明しよう

図に示すように1イレフ.2 Levを引き継いだ2イレフ.3つあります.lev.1のアイテムlev.3に送信するが、UserContextを使用しない場合は、図の左側の部分のようにlevを送信します.2のlevを通ります.3へ行くこれを「Props Drilling」といいます.

Props Drilling:

Props Drillingは符号化に致命的なエラーは発生しません.
しかし,移管が必要な支柱が10,15個を超えると,これらの支柱を追跡することが難しく,メンテナンスも困難である.
以上の理由から、useContextを使用して防犯を行います.使用方法は以下の通りです.
基本的にはそうです.

import React, { createContext } from "react";

export const ThemContext = createContext("초기값");

まずContextを作成し、初期値を指定してエクスポートします.

import React from "react";
import UseContext from "./UseContext/UseContext";
import { ThemContext, basicData } from "./UseContext/Context";
const App=()=>{
	return(
      	<ThemContext.Provider
        	value={{ boolean: basicData.boolean, name: basicData.name }}
      	>
        	<UseContext />
      	</ThemContext.Provider>
	)}

<エクスポートされた関数.Provider value={}>親コンポーネントを囲みます.
これにより、サブエレメント上のconst{変数}=reactとなる.useContext(ThemContext); この方法でいいです.
以下は前回学習したUseReducerであり,UseContextのコードを用いた.

//Context.tsx

import React, { createContext } from "react";

export const basicData ={
  boolean:true,
  name:'찬호'
}

export const ThemContext = createContext(basicData);

//App.tsx

import React from "react";
import UseContext from "./UseContext/UseContext";
import { ThemContext, basicData } from "./UseContext/Context";

const App = () => {
  return (
    <>
    <ThemContext.Provider
        value={{ boolean: false, name: '인욱' }}
      >
        <UseContext />
      </ThemContext.Provider>
    </>
  );
};

export default App;

//UseContext.tsx

import React from "react";
import UseContextApplication from "./UseContextApplication";

const UseContext = () => {
  return (
    <>
      <UseContextApplication />
    </>
  );
};

export default UseContext;

//UseContextApplication.tsx

import React from "react";
import { ThemContext } from "./Context";

const reducer = (state: string, action: string): string => {
  if (action === "찬호") {
    state = "찬호";
    return state;
  } else {
    state = "인욱";
    return state;
  }
};

const UseContextApplication = () => {
  const { boolean, name } = React.useContext(ThemContext);
  const [boo, setBoo] = React.useState(boolean);
  const [sdaf, dispatch] = React.useReducer(reducer, name);

  return (
    <>
      <button
        onClick={() => {
          setBoo(!boo);
          if (boo) {
            dispatch("인욱");
          } else {
            dispatch("찬호");
          }
        }}
      >
        change info
      </button>
      {String(boo)}
      {sdaf}
    </>
  );
};

export default UseContextApplication;

ブログを書いている時に感じたけど本当に説明しづらいもう一度見ると、私にも読めません.そう解釈できないのは、全く理解していないからかもしれない.

3行の概要

からfortusを上から下へ送信するとdiractが送信される(

)

支柱の掘削はよくありません.

は本当に説明できません.車酔いの程度.

git) https://github.com/ryuyh2000/react-Hook-prac!