条件付きレンダリング

これまでapiにより他のコンピュータとのデータ処理が分かってきた.

もしそうであれば、BECコンピュータは、データの送信と受信時にはまだリクエストに応答していませんが、応答が待機していない場合には、条件付きレンダリングが必要です.
の写真から見ると、データを受信するのに時間がかかる場合は、ユーザに空白の画面を直接見せるよりも、展示できる画面の一部をレンダリングして、次の写真のように値を取得してからデータを表示することができます.

🖥 条件付きレンダリングをコードとして使用する方法

export default function DynamicRoutedPage(){

    const router = useRouter()

    const {data} = useQuery(FETCH_PRODUCT,{
        variables : {productId : router.query.qqq}
    })
    
    console.log(router.query.qqq, data)
    
    return(
        <div>
            <div>작성자 : {data && data.fetchProduct.seller}</div>
            <div>설명 : {data && data.fetchProduct.name}</div>
            <div>내용 : {data && data.fetchProduct.detail}</div>
            <div>가격 : {data && data.fetchProduct.price}</div>
	// 👉🏻 미리 가격,내용 등의 데이터를 출력해놓고 조건부 렌더링을 사용,
	//&&를 기준으로 데이터 값이 없을경우(거짓) 왼쪽 값을,
	//데이터를 받아올 경우(참, 데이터가 존재)오른쪽 값을 출력한다. 
        </div>
    )
}

🛠 条件付きレンダリング-オフセットフィルタをより簡単に使用します。

大量のデータがあり、データの後ろの値が存在するかどうかを決定する必要がある場合は、コードが長くなり、可読性も低下します.
この時必要なのは国際通貨基金です

//&&연산자 사용
return(
        <div>
            <div>작성자 : {data && data.fetchProduct.seller}</div>
            <div>설명 : {data && data.fetchProduct.name}</div>
        </div>
) 
//옵셔널 체이닝 ? 사용
return(
        <div>
            <div>작성자 : {data?.fetchProduct.seller}</div>
            <div>설명 : {data?.fetchProduct.name}</div>
        </div>
) 

ゲスト試合ですね.その他にも、参考までに以下の2つの方法があります.

データ||FetchProfile-データ型が偽(数字0、NAN、空文字列"、false、null、undefinedなど)の場合|後の値出力は

である.

data ?? FetchProfile-データ型がnullまたはundefinedの場合?後の値出力

💡TIP !

光学フィルタのようにコードの使用を短縮する場合があります.
一般的にif演算子の略語を使って、条件文の中で?trueの結果:falseの結果フォーマットを使用します.

//if 연산자
function getFee(isMember){}
   if(isMember === true){
    	return "$2.00"
    } else{
    	return "$10.00"
    }
//삼항 연산자 이용
function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

3つの演算子の詳細については、リンク[MDN 3条件演算子]を参照してください.