조건부 렌더링

wony·2022년 3월 21일

삼항연산자

data는 동기적으로 받아와야하는 데이터이지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어주는 방법
data가 도착하기전 비동기 방식으로 내가 원하는 것을 보여준다

<div>{data?data.fetchProduct.seller: <span>loading...</span> }판매자의 상품입니다</div>

&&연산자

data && data.fetchBoard.writer

&&연산자는 데이터가 없을 경우 undefined를 반환해준다.
data가 없으면 data(undefined)를 보여주고 data가 있으면 data.fetchBoard.writer를 보여주는것이라고 이해하면 되겠다.

옵셔널 체이닝

data?.fetchBoard.writer

optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined 이거나 null 이라면 undefined를 리턴해줍니다.

위에 있는 삼항연산자, && 연산자와 똑같은 기능을 하지만 더 간단하다
가장 최근에 나온 문법

Nullish-coalescing

data ?? data.fetchBoard

nullish coalescing은 앞에가 거짓중에서도 null과 undefined일때만 렌더해주는 연산자이다.

연산자를 이용해서 console에 이용해본 결과

"사과" && "안녕하세요"
'안녕하세요'
"" || "반갑습니다"
'반갑습니다'
"사과" || "반갑습니다"
'사과'
0 || "안녕하세요"
'안녕하세요'
false || "안녕"
'안녕'
null || "헬로"
'헬로'
undefined || "하이"
'하이'
null ?? "주똄므" 
'주똄므'
undefined ?? "봉쥴"
'봉쥴'
0 ?? "니하오"
0