応答素子間の通信

今日は、コンポーネント間の通信方法と、グローバルに値を転送できるContext APIについてまとめます.

export default function A() {
  const [value, setValue] = useState("아직 안 바뀜");
  const click = () => {
    setValue("E의 값을 변경");
  };
  return (
    <div>
      <B value={value} />
      <button onClick={click}>E의 값을 바꾸기</button>
    </div>
  );
}

function B({ value }) {
  return (
    <div>
      <p>여긴 B</p>
      <C value={value} />
    </div>
  );
}
...
function E({ value }) {
  return (
    <div>
      <p>여긴 E</p>
      <h3>{value}</h3>
    </div>
  );
}

上記のコードから見ると,usState()で入力された状態値がpropsによって素子間でさらに低下し,これは非常に不便である.特に、複雑な構成部品構造を持つWebサイトを作成する場合.
そこで開発された方式はContext APIであり,propsを直接上から下へまたは下から上へ伝達するのではなく,素子ツリー全体に特定の値を伝達する方法である.このようなグローバルデータを提供する場合には,ログインしたユーザ情報,UIトピックなどがある.
使用方法:

const PersonContext = React.createContext();

Contextコンポーネントを作成すると、

    <PersonContext.Provider value={persons}>
      <App />
    </PersonContext.Provider>

アプリ全体.jsを包み、PersonContextラベルに値を記入すればよい.

const persons = [
  { id: 0, name: "Mark", age: 39 },
  { id: 1, name: "Hanna", age: 28 },
];

これによりValuesというpropsにオブジェクトデータが割り当てられる.また、これらのデータは必要な場所で消費することができます.

export default function Example1() {
  return (
    <PersonContext.Consumer>
      {(value) => (
        <ul>
          {value.map((value) => (
            <ul>
              <li>{value.name}</li>
              <li>{value.age}</li>
            </ul>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

あ、不思議なことに、私が勉強しているHookがアップロードしなければならないHookの資料が押せなくて、正確に言えばGit initはだめなので、1時間10分くらいうろうろしていました...この方法その方法...(先日中で襟を使ったことがあるかも…)突然グーグルで答えを見つけて解決!!
ミラーメッセージ:既存Git Repository inを再初期化…
rm -rf .Gitは1行書いて強制削除すればいいだけです.