React hooks: useState, useEffect

最初のプロジェクトでクラスコンポーネントを使用するのとは異なり、2番目のプロジェクトではfunctional componentを使用して反応コードを構築します.
Functional componentは、hooksを使用してclass componentのライフサイクルを強化する関数をコンポーネントとして使用します.
(強化といっても、実際にはライフサイクルを使うよりフックを使う方が簡単です.)
useState as state in constructor
useStateの作成は、functional component内の最上位に位置します.

  const [cateList, setCateList] = useState("통합검색");
  const [books, setBooks] = useState([]);
  const [sort, setSort] = useState("keyword");

useEffectのクラスライフサイクルにおける役割はcomponentDidMount()、componentDidUpdate()と同じである.
したがって、mockデータまたはサーバ上のデータを取得する場合、userEffectを使用して次のようにデータを受信することができる.

useEffect(() => {
    fetch("/data/bookList.json")
      .then((res) => res.json())
      .then((res) => {
        console.log("res.books >>>", res.book_list);
        setBooks(res.book_list);
      });
  }, []);

上のコードではuserEffectの2番目のパラメータが空の配列を与えていることがわかります.
useEffect as componentDidMount and componentDidUpdate
userEffectの2番目の位置は、パラメータとして依存配列を受け入れる.
この配列の値は追跡および更新されるため、空の配列を配置すると、useEffectはcomponentDidMountのように最初のレンダリング時にのみ実行されます.
2番目のパラメータに何も与えなければ、1番目のパラメータは更新され続けます.そのため、メモリの漏れが深刻で、ノートパソコンは熱いフライパンになります.