Conditional-rendering

비동기 통신과 조건부렌더링

자바스크립트에서 코드가 순서대로 실행될 때,
서버에 데이터를 요청하고 응답을 받아오는 동안 데이터가 아직 없을때 화면이 먼저 그려지게 되면 에러가 발생할 수 있다.
벡엔드에서 데이터를 받아오기 위해서 시간이 걸리기 때문에
오류가 발생하는 문제를 해결 하기 위해 조건부렌더링을 사용할 수 있다.

1. 삼항 연산자

data ? data.fetchProfile : undefined

물음표 앞 조건이 참일때와 거짓일때 렌더 값을 모두 작성한다.
따라서 data가 없으면 undefined를 렌더하고 data가 들어오면 data.fetchprofile를 렌더링해준다.

2. && 연산자

data && data.fetchProfile

데이터가 없으면 undefined를 반환해준다.

3. Nullish coalescing 연산자

data ?? data.fetchProfile
data || data.fetchProfile

앞의 값이 빈값(null)이거나 거짓(undefined)일 경우 뒤의 값을 렌더한다.

4. 옵셔널 체이닝 (Optional-Chaining)

옵셔널 체이닝 역시 데이터를 화면에 렌더링할때 사용하며
&& 연산자를 더욱 간결하게 표현하기 위해 탄생했다.

data?.fetchProfile

물음표 앞 참조가 undefined 또는 null 이면 undefined를 반환하고 그렇지 않으면 우측의 프로퍼티를 참조한다.

☺︎☺︎☺︎