Conditional Rendering

조건부 렌더링(Conditional Rendering)

주어진 조건에 따라 보여주는(렌더링하는) 내용이 달라지는 것

const conditionA = () => {console.log("조건A")}
const conditionB = () => {console.log("조건B")}

if( condition === "A")
		{conditionA()}
    else{conditionB()}

위 코드도 조건부렌더링의 예라고 볼 수 있다.
하지만 흔히들 말하는 조건부렌더링은 삼항연산자, &&/||연산자, 옵셔널 체이닝(Optional-Chaining)을 사용하는 것을 의미한다.

삼항연산자

data에서 받아온 정보가 있다면 name을 보여주고 그렇지 않으면 loading...을 보여준다.

data ? data.name : <div>loading...</div>

&&/??/||연산자

&& : data에서 받아온 정보가 있다면 name을 보여준다. 그렇지 않으면 undifined를 보여준다.
?? : data가 nullish이면(null 또는 undifined) 뒤의 값을 보여준다.
|| : data가 falsy일 경우 뒤의 값을 보여준다.

data && data.name
data ?? data.name
data || data.name