조건부 랜더링

지금까지 api를 통해서 다른 컴퓨터와의 데이터 처리에 대해 알아보았다.

그렇다면 데이터를 주고받을 때 벡엔드 컴퓨터에서 요청에 대한 응답은 아직 오지 않았지만 응답이 올 때까지 기다릴 수 없을 때 필요한 기능이 바로 조건부 렌더링이다.

사진으로 봤을 때 데이터를 받아오기까지 시간이 걸린다면 사용자에게 아예 빈 화면을 보여주는 것보다 일부 보여줄 수 있는 화면을 먼저 렌더링해두고 아래 사진처럼 값을 받아오고 나서 데이터를 표출해줄 수 있다.

🖥 코드로 보는 조건부 렌더링 사용 방법

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>
) 

옵셔널 체이닝은 ?. 외에도 아래 두가지 방식으로도 사용되니 참고해두자.

• data || fetchProfile - data의 종류가 거짓(숫자 0,NaN, 빈 문자열 "", false, null, undefined 등) 일때 || 뒤의 값 출력
• data ?? fetchProfile - data의 종류가 null, undefined 일때, ?? 뒤의 값 출력

💡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 삼항 조건연산자 ]