✍🏻 [Code Camp_TIL] 5일차: 조건부 렌더링(&&, 삼항연산자, Optional Chaining)

조건부렌더링

우리가 비동기 방식으로 통신을 하고 있는 경우, 데이터를 요청하고 응답을 받아오는 동안 화면에 그려질 데이터가 undefined이므로 첫 화면이 그려지는 시기에 데이터를 불러오면서 에러가 발생하게 된다.

이를 해결하기 위해서 화면에 미리 그려놓을 수 있는 부분은 그려놓고 로딩 후 데이터를 받아와서 마저 그려주는 조건부 렌더링을 사용한다.

조건부 렌더링에는 && 연산자, 삼항연산자, optional-chaining이 있다.

삼항 연산자

data ? data.fetchProfile : undefined

data가 있다면 data.fetchProfile 값을, 없다면 undefined를 출력한다는 것을 의미한다. 삼항연산자는 데이터가 있을 때와 없을 때를 모두 적어줘야 하기 때문에 이를 간단하게 나타내기 위해서 && 연산자를 사용해보았다.

&& 연산자

data ? data.fetchProfile

의미는 위에서 삼항연산자를 사용했을 때와 동일하다. && 연산자는 데이터가 없을 경우 자동으로 undefined를 반환하고, data가 참이면 data.fetchProfile를 실행한다.

|| 연산자

data || data.fetchProfile

&& 연산자와 반대되는 개념이다. 앞의 값이 거짓(false)일 때 뒤의 값을 보여준다. 즉 data가 거짓이면 data.fetchProfile을 보여준다. 만약 data가 참이면 data를 보여준다. || 연산자는 기본값을 처리할때 사용된다.

nullish-coalescing

data ?? data.fetchProfile

data가 null이나 undefined 일때 data.fetchProfile 보여준다. data가 0이거나 false 등의 거짓값인 경우에는 적용되지 않는다! 기본적인 의미는 || 연산자와 유사하나 nullish-coalescing은 null이나 undefined만 해당한다는 것에 유의하자!

Optional-Chaining

Optional-Chaining은 && 연산자를 쓰면서 길어졌던 코드를 간결하게 사용할 수 있는 연산자다.

data?.fetchProfile

? 연산자 앞 객체의 참조가 undefined나 null 이라면 undefined를 리턴한다. 삼항연산자, && 연산자와 같은 기능을 한다.

optional chaining은 데이터가 없을 때 undefined를 출력했다가 데이터가 들어오면 데이터를 다시 화면에 띄워준다(리렌더링).

---