js에서는 위에서부터 차례대로 실행 => 데이터 요청 & 응답 받을 동안 화면에 그려질 데이터의 내용 : undefined -> 첫 화면이 그려지는 시기에 데이터 불러오면서 에러 발생 -> 화면을 미리 그려놓고 데이터를 그려주기 위해 조건부렌더링
조건부렌더링의 종류
data ? data.fetchProfile : undefined
data && data.fetchProfile
앞이 거짓일 때 뒤의 값을 보여주는 경우는?
Nullish coalescing 연산자(??,||)
?? : 앞의 값이 빈 값(null,undefined만, false,0등은 앞 반환)이면 뒤의 값 보여줌- 빈값인지 아닌지 명확히 구분하는 용도
, || : 앞이 거짓이면 뒤(디폴트 설정 - 값 없으면 기본값 보여줘)
data ?? data.fetchProfile //앞이 null, defined일 경우에만
뒤를 반환한다.
data || data.fetchProfile // 앞이 falsy한 값일 때 뒤를 반환
값이 없니? 없으면 data(기본값) 보여줘.
?? optional chaining 이 데이터가 들어올 때까지 기다려 줄까?
기다려주는게 아님. 데이터가 없을 때는 undefined 리턴했다가 데이터가 들어오면 들어온 데이터를 가지고 화면을 다시 렌더링; 리렌더링
?? optional chaining 언제 사용할까?
데이터를 화면에 렌더링할 때 사용
백엔드와 통신해 받아오는 데이터 - 시간이 걸림 ; 옵셔널 체이닝 이용 필요