3つの条件文モード

今日は反応でよく使われる条件文の形態を調べてみましょう.
1.構成部品でif文を使用する
他の言語を学んだことがある人なら、文の使い方はよく知っている部分だと思います.

if(조건){
	// 참일 때,
}
else{
	// 거짓일 때,
}

上記のように条件に従って論理を分岐処理するのは比較的容易な方法であるが,REACTのJSX領域内部ではif文の使用は許されない.
ではJSX分野はどこでしょうか.

function App(){
	return(
		// JSX 영역
	);
}

反応素子内では、JSX領域は、上述のように、戻り部分とみなすことができる.
この領域はHTMLの作成と実際の表示部分といえる.
if文を使用してこれらの問題を発生させない場合は、次のように記述できます.

function App(){
	if(true){
		return <div>It's true</div>;
	}else{
		return null;
	}
}

戻り文内部で条件付き分岐処理を行うのではなく、戻りに入る前にif文処理を行い、必要な論理を設計することができます.
2.JSXで3つの演算子を使用
JSX内部には条件文を使用する方法も存在する.

の3つの演算子の使用方法
https://velog.io/@cho876/Chapter-18.-さんこうえんざんし

前章で一度議論しましたが、もう一度簡単に整理します.
3つの演算子は次のように記述されます.
条件文True,Execute Code:False,Execute Code
条件文が真の場合、左側のコードが実行され、偽の場合、右側のコードが実行されるとみなされます.
例を通してもう一度確認してみましょう.

function App(){
	return(
		<div>
		{
			1===1 ? <div>It's True</div> : null
		}
		</div>
    );
}
    

このコードについては、1==1が真であるため、左側のコード(It's True)が実行される.
条件文をJSX内部で使用する場合は、3つの演算子も代替として使用できます.
3.&&演算子で代用
JAvascriptには&&演算子があります.

共通言語

1. true && true > true
2. true && false > false

ただし、javascriptにtrue/falseではなくデータ型が追加されている場合は、次の処理が行われます.

1. true && '참' > '참'
2. false && '거짓' > false

これは&&シンボルが重なって使用されると最初のfalsey値が吐き出され、そうでなければ最後の値が吐き出される原理と理解できる.
反応器では,これらの現象を適用して条件文をさらに簡略化することができる.
例を見てみましょう.

function App(){
	return(
		<div>
			{
				1===1 && <div>It's True</div>
			}
		</div>
	)
}

この例を実行すると、It's True文が出力されます.
4.終了
このように,反応に条件文を用いる方法はたくさんある.
関連はありませんがcaseやswitch文を使う方法もありますので、最も状況に合った効率的な形式で処理すると、コードがよりきれいになります.
完全なソースGitリンク
https://github.com/cho876/React/tree/master/chapter20