レスポンスデータストリーム

応答中のデータストリーム
React開発方式の最大の特徴は素子単位の開発である.アプリケーションのプロトタイプを受信した場合は、まずコンポーネントを見つけます.構成部品を作成したら、ページをアセンブリします.→アップ(bottom-up)開発
◆テストしやすく、拡張性に優れています!
✅ アプリケーションの設計を受信した場合は、まずコンポーネント階層に分割します.
Reactでは、データが上から下へ(Fluxモード).構成部品は親構成部品からpropsを渡すことができます.すなわち、データストリームは上から下へ流れる.
✅ reactは一方向データストリームに従います!
状態の条件
これは

が両親から伝えたデータ(props)ではありません.

は変更可能なデータです.

要素内の他の状態または支柱は計算できません.

位置決めステータス
ステータスが構成部品に対してのみ有効な場合は、構成部品に配置するだけですが、1つのステータスに複数の構成部品が影響を受ける場合は、共通の親構成部品に配置する必要があります.
逆データ・ストリーム
親構成部品のステータスは子構成部品によって変わります.
◇Stateドラッグアンドドロップ(Lifting State up):handlerをpropsとしてサブアセンブリに渡す
Lifting State Up
親構成部品の「ステータスを変更する関数」自体を子構成部品に渡し、子構成部品によって実行します.
Effect Hook
Side Effect:****関数のいずれかのインプリメンテーションが関数の外部に影響を与える場合、その関数はSide Effectを有する.
Reactは、Side Effectを処理するためのEffect Hookを提供する.useEffectの最初のパラメータは関数であり、この関数内で副作用を実行すればよい.
新しい構成部品をレンダリングするときにEffect Hookを実行

構成部品を作成すると、

が画面上で初めてレンダリング(表示)されます.

コンポーネントに新しい支柱があり、

をレンダリングします.

要素の状態が変化し、

がレンダリングされる.
ex)ブラウザAPIを使用してタイトルを変更する

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const proverbs = [
    "좌절감으로 배움을 늦추지 마라",
    "Stay hungry, Stay foolish",
    "Memento Mori",
    "Carpe diem",
    "배움에는 끝이 없다"
  ];
  const [idx, setIdx] = useState(0);

  const handleClick = () => {
    setIdx(idx === proverbs.length - 1 ? 0 : idx + 1);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>명언 제조</button>
      <Proverb saying={proverbs[idx]} />
    </div>
  );
}

function Proverb({ saying }) {
  useEffect(() => {
    document.title = saying;
  });
  return (
    <div>
      <h3>오늘의 명언</h3>
      <div>{saying}</div>
    </div>
  );
}

じょうけんえいきょうuseEffectの第2の因子は、条件を含む配列である.条件は、値が変更された場合を意味します.配列にはいくつかの値が含まれています.この配列を従属関係配列と呼ぶ.
依存関係アレイの依存関係の値が変化すると、最初のパラメータの関数が実行されます.

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter,count]);

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

✅ 空の配列を2番目のパラメータとして使用すると、effect関数は、構成部品の最初の作成時にのみ実行されます.
*外部APIでリソースを受信し、API呼び出しが不要になった場合に使用
fetch APIを使用してAJAXを要求

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

✅ 外部API接続が遅いことを考慮して、ロードスクリーン(loading indicator)の実装(fetch要求の前後にsetIsLoadingを設定してより良いUXを実現する)