조건부 렌더링(Conditional Rendering)

조건부 렌더링

데이터를 불러오는 동안 화면에 오류가 출력되는 것을 막기 위해 조건부 렌더링을 사용한다.

삼항 연산자

삼항 연산자는 맨 앞에 조건문을 넣어주고 그 뒤에는 ?(물음표 기호), 그리고 그 뒤에 조건이 참이라면 실행할 식을 뒤에 넣어준다. 그 다음 :(콜론)을 넣어주어 조건이 거짓일 시 실행할 식을 넣어주면 끝!

data ? data.fetchBoard : "...loading"

논리 연산자(&&, ||)

삼항 연산자가 조건문을 만족할 때와 그렇지 않을 때의 값을 모두 써줘야했던 반면 && 연산자를 사용하면 데이터가 없을 경우 자동으로 undefined를 반환한다.

data && data.fetchBoard
// 앞이 참일 경우 뒤의 내용을 보여준다

data || data.fetchBoard
// 앞이 거짓일 경우 뒤의 내용을 보여준다

Nullish coalescing

?? 연산자를 사용한 연산식이다.

data ?? data.fetchProfile
// 앞이 falsy일 경우 앞의 내용을 보여준다

앞서 언급한 || 연산자를 사용한 연산식과의 차이는 반환되는 값이 falsy 일 경우에 대한 응답이다.
|| 연산자의 경우 앞 부분의 값이 falsy 일 경우 오른쪽 값을 반환해준다.
?? 연산자는 앞 부분의 값이 null 과 undefined 일 때만 오른쪽 값을 반환해주고, 그렇지 않은 falsy(0, '', false, NaN)의 경우 왼쪽 값을 반환해준다.

falsy

0, '', false, null, undefined, NaN(Not a Number)

옵셔널 체이닝(Optional Chaining)

ES2020에서 나온 최신 문법으로 간결하게 코드를 작성하게 해준다. ? 앞의 값이 nullish(null 혹은 undefined)일 경우 undefined를 반환한다.

data?.fetchBoard

반환하는 값은 삼항 연산자, && 연산자와 같지만 참조식을 한 번 더 반복할 필요가 없기 때문에 훨씬 짧고 간결하게 식을 작성할 수 있다. 옵셔널 체이닝은 여러번 중첩해서 사용할 수도 있다.

data?.fetchBoard?.writer

중첩해서 사용하는 이유는 값에 더 안전하게 접근하기 위해서다. 사용자를 고려한다면 데이터가 존재하지 않을 경우 전체적인 오류 화면을 보여주는 것보단 데이터가 들어갈 부분만 공백으로 보여주는 것이 훨씬 낫기 때문이다.