Conditional-rendering

Conditional-rendering (조건부 렌더링) 이란?

• data 를 동기적으로 받아올 때 걸리는 시간동안 data 가 없을 때 발생하는 오류를 방지하기 위해 data 가 없을 때와 있을 때를 나눠서 렌더링 해줄 수 있다.

1. 삼항 연산자

// 조건 ? 조건이 참일때 렌더 : 조건이 거짓일때 렌더
data ? data.fetchProfile : undefined

2. && 연산자

// 조건 && 조건이 참일때 렌더 할 것
data && data.fetchProfile

3. 옵셔널 체이닝 (optional-chaining)

// 조건?.있으면 렌더 할 것 , 없으면 undefined 리턴
data?.fetchProfile

• 가장 간결하고, 가장 최근에 나온 문법으로 사용이 간단하고 가독성이 좋다.