Conditional-rendering

조건부 렌더링이란?

React render 할 때 특정 조건에 따른 동작을 하게 하는 것입니다.

1. 삼항 연산자

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

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

2-1. && 연산자

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

&&연산자는 연산자 앞의 값이 참일 경우엔 뒤의 값을 거짓일 경우엔 앞에 것을 그려줍니다.
data가 없을 때 렌더할 부분을 따로 적어줄 필요가 없어 삼항 연산자에 비해 상당히 간결해졌습니다.
하지만 게으른 개발자들은 이 코드조차 길다고 느껴집니다.

2-2. || 연산자

// 조건 || 거짓이면 렌더 할 것
data || data.fetchProfile
* data가 참이라면 data가 그려지게 됩니다.

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

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

여러가지 조건부 렌더링을 거쳐 더욱 간결하고 가장 최신에 나온 문법인 optinoal-Chaining방법입니다.

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

optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined 또는 null 이라면 undefined를 리턴해줍니다.
옵셔널 체이닝은 위의 두 연산자와 같은 역할을 합니다. 하지만 사용은 훨씬 간단해지고 가독성이 좋아졌습니다.