&&, 삼항연산자, Optional Chaining

옵셔널 체이닝과 조건부 렌더링은 ?를 기준으로 없으면 앞을 잇으면 뒤를 보내준다.

옵셔널 체이닝

{data?.fetchBoard?.writer}
참인 경우 fetchBoard?.writer를 보내주고, 거짓인 경우 data를 보내준다.

조건부 렌더링

거짓&&참

{data && data.fetchBoard.writer}
참인 경우 data.fetchBoard?.writer를 보내주고, 거짓인 경우 data를 보내준다.

참&&거짓

{data || data.fetchBoard}
거짓이면 data.fetchProfile이 참이면 data가 그려진다.

null/undefined ?? 참 (nullish-coalescing)

{data ?? data.fetchBoard}
null과 undefined면 data를 보내주고, 참이면 data.fetchBoar를 보내준다.

삼항 연산자

삼항 연산자: {data?.fetchBoard.writer :

}
참이면 fetchBoard.writer를 보내주고, 거짓이면 를 보내준다.
삼항연산자는 코드가 길어지면 ( : )을 찾기 힘드므로 한줄 정도일때 사용해주는 것이 좋다.

조건부 렌더링 실습

거짓&&참

"사과" && "안녕하세요"
'안녕하세요'

참&&거짓

"사과" || "반갑습니다"
'사과'

0 || "안녕하세요"
'안녕하세요'

false || "안녕하세요"
'안녕하세요'

null || "안녕하세요"
'안녕하세요'

undefined || "안녕하세요"
'안녕하세요'

null/undefined ?? 참 (nullish-coalescing)

null ?? "안녕하세요"
'안녕하세요'

undefined ?? "안녕하세요"
'안녕하세요'

0 ?? "안녕하세요"
0

거짓인 경우

숫자(number): 0
문자열(string): ""(빈칸) 단, " "공백을 입력해준 경우는 참이다.
boolean: false
null(일부러 비워놓음을 의미)
undefined(처음부터 비워있음을 의미)
NaN(Not a number)