🐦 Data Fetching

::Data Fetching with useEffect Hook

import { useState, useEffect } from "react"

function App() {
	const [users, setUsers] = useState([])

	useEffect(() => {
		// Data Fetching -> Side Effect
		fetch("http://test.com/users") // (1)
			.then(res => res.json())     // (2)
			.then(res => setUsers(res))  // (3)
	}, [])

	return (
		<ul>
			{users.map((user) => {
				<li key={user.id}>{user.name ? "" : ""}</li>
			})}
		</ul>
	)
}

以上のコードは,仮想APIからユーザリストを受信するコードである.データ呼び出しはsideEffectに相当し、userEffectで使用する必要があります.コンポーネントのレンダーパスを順に見て、レンダーとuseEffect hookの関係を見ます.
1.App構成部品がレンダリングされます.初回ログインなのでstate usersの値は空の配列です.したがって、空のulはブラウザに出力されます.

<ul></ul>

マウントが完了すると、userEffectが実行され、最初のパラメータとして受信された関数(callback)が実行される.

2-1. (1)のfetch()関数は、第1の再パラメータとしてデータ要求を送信するurlを文字列として受信し、第2のパラメータはデータ要求に使用するオプションをオブジェクトとする.

2-2. (2)前の要求の応答が正常であれば,応答本体のデータをJavaScriptオブジェクトに変換する.

2-3. (3)このオブジェクトをパラメータとしてsetusers関数を呼び出し,ユーザの値を更新する.

2-2で呼び出されたsetStateはステータスを変更し、変更ステータスを反映する新しい画面を描画するためにアプリケーションコンポーネントをレンダリングします.このとき、stateとしてのusersは複数のオブジェクトを含む配列の形式であり、JSX要素が画面にレンダリングされる.

// 받아온 데이터가 다음과 같은 형태라고 가정하자
[
	{ id: "1", name: "React" },
	{ id: "2", name: "Side Effect" },
	{ id: "3", name: "useEffect" }
]

<ul>
	<li key="1">React</li>
	<li key="2">Side Effect</li>
	<li key="3">useEffect</li>
</ul>

::Error Handling with Conditional Rendering

プロジェクトの実行中に、特定の条件でのみ構成部品をレンダリングする必要があります.
構成部品関数の内部で、特定の値に基づいて選択的にレンダリングを行うことを条件付きレンダリング(conditional rendering)と呼ぶ.

import { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch("/mock.json")
      .then((res) => res.json())
      .then((res) => setData(res));
  }, []);

  return (
    <div className="App">
      <h1>Hello useEffect!</h1>
      <h2>조건부 렌더링 연습 문제</h2>
      <ul>
        {data.users.map((user) => {
          return <li key={user.id}>{user.username}</li>;
        })}
      </ul>
    </div>
  );
}

これはコードに書いても問題ありませんが、ブラウザでエラーが発生します.やれやれ頭が痛くて、ディスプレイを全部壊したい.

エラーコードをよくチェックすると
1. TypeError
タイプが間違っているということです.これは、numberタイプデータに対してobjectタイプデータのみに対して実行できる操作を実行するなど、発生する可能性のあるエラーです.

cannot read property 'map' of undefined
そのまま読むと、定義されていない値に対してmap関数を実行しようとします.しかしmap関数はデータを配列する方法に属する.定義はありませんmap()のような形式でコードを記述しなければ問題は発生しません.

data.users.map((msg) => {}}
エラー画面では、22番行にカーソルがあり、その文を見ると、(2)に見えるmap関数が表示されます.それはデータです.すなわち、usersまでの値はundefinedである.うっとうしい

以上をまとめる.

data.ユーザは,データを並べ替えmap関数を用いることを望んでいる.

しかしある時点のデータusersはundefinedがある時点で空であることを示し、状態値の時点に関する問題であればreactのロードプロセスに関係する.

:3つの演算子/クイック評価

条件付きレンダリングを実現するには、3つの演算子または&&演算子を使用する必要があります.
区別する

の3つの演算子は、条件に従った真/偽レンダリングの異なるUIに使用される.

&&演算子では、条件がtrueの場合にのみ特定のUIがレンダリングされ、falseの場合は何もレンダリングされません.

Webサイトにログインするときに予約ポイントを確認できるコードを実装したとします.
このコンポーネントは、親コンポーネントからisLogin、name、pointという3つのpropsを受信し、isLoginステータスがtrueの場合、ユーザー名と予約ポイント履歴を出力します.

function Greetin(props) {
	const { isLogin, name, point } = props;

	return {
		<div>
			{isLogin ? (
				<div>
					<p>{name}님 환영합니다!</p>
					<p>현재 보유중인 포인트는 {point}원 입니다.</p>
				</div>
			) : null}
		  </div>
   }
}

3つの演算子の場合、falseの場合は値を割り当てる必要があります.だから意味のないNullを入力します.

function Greetin(props) {
	const { isLogin, name, point } = props;

	return {
		<div>
			{isLogin && (
				<div>
					<p>{name}님 환영합니다!</p>
					<p>현재 보유중인 포인트는 {point}원 입니다.</p>
				</div>
			)}
		</div>
	}
}

&&演算子の場合、trueの場合、nullを省略しながらレンダリングのみを行うことを示すため、可読性が向上します.

&&演算子を使用する際の注意点

変数が数値タイプの場合、0はfalseです.

変数が文字列タイプの場合、空の文字列""もfalseです.