09) Conditional-rendering( &&, 삼항연산자, Optional Chaining

Conditional-rendering은 조건부 렌더링이라 한다.

Optional-Chaining

삼항 연산자

제일 처음은 삼한 연자라를 사용한다.

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

data는 동기적으로 받아와야 하는 데이터라 받아오는데에 시간이 걸린다. 하지만, 받아올 때 까지 기다려주지 않고 다음 코드로 넘어가게 된다.
따라서 data가 없을 때 발생하는 오류를 방지하기 위해 data가 없을 떄는 undefined를 렌더하고, data가 들어오면 data.fetchprofile을 다시 렌더링 해준다.

&& 연산자

그 후에 && 연산자를 사용한다.

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

&& 연산자는 데이터가 없을 경우 자동으로 undefined를 반환해준다.
data가 없을 때 렌더할 부분을 따로 적어줄 필요가 없어 삼항 연잔자에 비해 상당히 간결해 진다.

|| 연산자

// 조건 || 거짓이면 렌더 할 것
data || data.fetchProfile

• data가 참이라면 data가 그려지게 됩니다.

&& 연산자는 앞의 값이 참일 경우에만 뒤의 값을 보여주는데, 반대로 앞의 값이 거짓일 때 뒤의 값을 보여준다.

옵셔널 체이닝

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

옵셔널 체이닝은 ? 연산자 앞 객체의 참조가 undefined 또는 null 이라면 undefined를 리턴해준다. 옵셔널 체이닝은 위의 두 연산자와 같은 역할을 한다.