그렇다면 데이터를 주고받을 때 벡엔드 컴퓨터에서 요청에 대한 응답은 아직 오지 않았지만 응답이 올 때까지 기다릴 수 없을 때 필요한 기능이 바로 조건부 렌더링이다.
사진으로 봤을 때 데이터를 받아오기까지 시간이 걸린다면 사용자에게 아예 빈 화면을 보여주는 것보다 일부 보여줄 수 있는 화면을 먼저 렌더링해두고 아래 사진처럼 값을 받아오고 나서 데이터를 표출해줄 수 있다.
🖥 코드로 보는 조건부 렌더링 사용 방법
export default function DynamicRoutedPage(){
const router = useRouter()
const {data} = useQuery(FETCH_PRODUCT,{
variables : {productId : router.query.qqq}
})
console.log(router.query.qqq, data)
return(
<div>
<div>작성자 : {data && data.fetchProduct.seller}</div>
<div>설명 : {data && data.fetchProduct.name}</div>
<div>내용 : {data && data.fetchProduct.detail}</div>
<div>가격 : {data && data.fetchProduct.price}</div>
// 👉🏻 미리 가격,내용 등의 데이터를 출력해놓고 조건부 렌더링을 사용,
//&&를 기준으로 데이터 값이 없을경우(거짓) 왼쪽 값을,
//데이터를 받아올 경우(참, 데이터가 존재)오른쪽 값을 출력한다.
</div>
)
}
🛠 조건부 렌더링 더 간단하게 사용해보자 - 옵셔널 체이닝
수많은 데이터가 있을 경우 그리고 데이터 뒤의 값까지 존재 여부를 확인해야할 경우 코드가 길어지고 가독성이 떨어진다.
이때 필요한 게 옵셔널 체이닝 ⭐️
//&&연산자 사용
return(
<div>
<div>작성자 : {data && data.fetchProduct.seller}</div>
<div>설명 : {data && data.fetchProduct.name}</div>
</div>
)
//옵셔널 체이닝 ? 사용
return(
<div>
<div>작성자 : {data?.fetchProduct.seller}</div>
<div>설명 : {data?.fetchProduct.name}</div>
</div>
)
옵셔널 체이닝은 ?. 외에도 아래 두가지 방식으로도 사용되니 참고해두자.
💡TIP !
옵셔널 체이닝처럼 코드를 단축해서 사용하는 경우가 있다.
보통 if 연산자를 줄여서 쓰는데 조건문에 ? true에 대한 결과 : false에 대한 결과 형식으로 사용한다.//if 연산자 function getFee(isMember){} if(isMember === true){ return "$2.00" } else{ return "$10.00" } //삼항 연산자 이용 function getFee(isMember) { return (isMember ? '$2.00' : '$10.00'); }
삼항연산자에 대한 자세한 내용은 링크를 참고하자 [ MDN 삼항 조건연산자 ]