조건부 렌더링을 쓰는 이유

JS는 작성된 코드가 상단에서부터 순서대로 실행되기 때문에 요청하고 응답을 받아오는 동안 화면에 그려질 내용이 undefined 된다.
(할당이 안된 것은 아님)
그래서 화면이 그려지는 시기에 데이터를 불러오게 된다면 에러가 발생하는 것!

이 부분을 효율적으로 화면을 미리 그려놓고 데이터를 그려주기 위해서 조건부 랜더링을 사용한다.

조건부 렌더링 종류

삼항 연산자

data는 동기적으로 받아와야하는 데이터이다. 하지만 데이터가 오기 전에 이미 return 부분에서 rendering을 해주고 있기 때문에 삼항 연산자를 써서 데이터가 있을 때, 없을 때를 모두 적어줘야 했음.

data ? data.fetchProfile : undefined

&& 연산자

data && data.fetchProfile

&&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해준다. 데이터가 없을 때 따로 div를 쓸 필요가 없으면(프래그먼트)
else 부분을 쓸 필요가 없다. 하지만 이 코드조차 길다고 느껴진다.

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

??연산자는 앞의 값이 빈 값이면 뒤의 값을 보여주며 ||연산자는 앞의 값이 거짓(false)일 경우 뒤의 값을 보여준다.

옵셔널체이닝

optional-chaing이란 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자 이다. (ES2020에 나온 최신문법)
optional-Chaining은 ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined를 리턴함.

위에 있는 삼항연산자, && 연산자와 똑같은 기능을 한 것이다.

---

예제

import { useQuery, gql} from '@apollo/client'

const FETCH_BOARD = gql`
    query {
        fetchBoard(number: 4){
            number
            writer
            title
            contents
        }
    }
`
export default function StaticRoutedPage(){
    
    const { data } = useQuery(FETCH_BOARD)
    console.log(data)

    return (

        <>
            <div> 4번 게시글 이동완료! </div>
            <div> 작성자: {data.FETCH_BOARD.writer}</div>
            <div> 제목: {data.FETCH_BOARD.title}</div>
            <div> 내용: {data.FETCH_BOARD.contents}</div>
        </>
    )
}
//* 조건부 랜더링 && 데이터있으면 뒤에 것을 없으면 undefined라 안보일 것이다
// <div> 작성자: {data && data.FETCH_BOARD.writer}</div

<div> 4번 게시글 이동완료! </div>
{/* 옵셔널 체이닝 */}
<div> 작성자: {data?.fetchBoard.writer}</div>
<div> 제목: {data?.fetchBoard.title}</div>
<div> 내용: {data? data.fetchBoard.contents : "조금만 기다려 주세요"} </div>
{/* 삼항연산자. */}