[리액트] 받아온 정보 할당할 때

받아온 정보 할당할 때

• 2항 연산자 사용하여, useState()의 초기값이 없는 설정으로 난 에러 제어하기

00. 들어가기 전에

• 정보를 불러오는 useState()의 초기값에 아무것도 넣지 않으면, 처음에 돌릴 맵의 정보가 없기 때문에 에러가 뜬다. 이를 방지하기 위한 방법을 알아보자!
• 최근 2항 연산자로 깔끔하게 많이 씁니다.
• if문을 return 밖에서 사용하여 보는 경우도 있지만, 아래와 같은 형식이 깔끔해 보여 아래 같은 형식을 소개하겠습니다.

01. 2항 연산자 { 상태값 && 내용} : 상태값이 있다면, 내용 보여주기

{product && (
        <main>
          <MainImage
            style={{
              backgroundImage: `url(${product.thumbnail})`,
            }}
          />
          <ProductName>{product.name}</ProductName>
          <ProductDescription>{product.price}원</ProductDescription>
}

02. 2항 연산자에서 한번더 나아가, 조건 까지 붙이기

{product && product.type ==="가을용품" && (
        <>
          <MainImage
            style={{
              backgroundImage: `url(${product.thumbnail})`,
            }}
          />
          <ProductName>{product.name}</ProductName>
          <ProductDescription>{product.price}원</ProductDescription>
        <>
}
{product && product.type ==="봄용품" && (
        <>
          <MainImage
            style={{
              backgroundImage: `url(${product.thumbnail})`,
            }}
          />
          <ProductName>{product.name}</ProductName>
          <ProductDescription>{product.price}원</ProductDescription>
        <>
}
{product && product.type ==="겨울용품" && (
        <>
          <MainImage
            style={{
              backgroundImage: `url(${product.thumbnail})`,
            }}
          />
          <ProductName>{product.name}</ProductName>
          <ProductDescription>{product.price}원</ProductDescription>
        <>
}