경우에 따라서 다른 HTML을 보여주고 싶은 경우(대여/정가/할인)

내용

• 백엔드에서 patch라는 변수명으로
  0을 넘겨주면 정가를, 1을 넘겨주면 할인을, 2를 넘겨주면 대여금액을 보여준다
• 삼항연산자 사용

결과

코드

onst [data, setData] = useState([]);

  useEffect(() => {
    fetch('/data/DetailData.json')
      .then(res => res.json())
      .then(data => {
        setData(data.product_detail[0]);
      });
  }, []);

     <Table>
        {data.patch === 2 ? (
          <thead>
            <tr className="rental">
              <td className="title">대여</td>
              <td className="product">권당 90일</td>
              <td />
              <td className="price">1,500원</td>
            </tr>
          </thead>
        ) : (
          <thead>
            <tr>
              <td rowSpan="2" className="title">
                구매
              </td>
              <td className="product">전자책 정가</td>
              <td />
              <td className="price">
                <span>{data.price}</span>원
              </td>
            </tr>
            <tr>
              <td className="product">판매가</td>
              <td className="price priceColor">
                {data.patch === 1 && (
                  <span className="nego">
                    10%
                    <i className="fas fa-long-arrow-alt-down" />
                  </span>
                )}
//금액 입력란에 patch가 1이면 세일가격을, 아니면 정가를 보여줌
                <span>{data.patch === 1 ? data.sale_price : data.price}</span>원
              </td>
            </tr>
          </thead>
        )}
      </Table>

const Table = styled.table`
  margin: 20px 0;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  width: 100%;
  font-size: 14px;

  tr {
    position: relative;
    width: 100%;
  }

  .rental {
    border-bottom: 1px solid lightgray;
  }

  .title {
    border-right: 1px solid lightgray;
    text-align: center;

    background-color: #f7fafc;
  }

  .title,
  .product,
  .price {
    padding: 10px 0 10px 10px;
  }

  .product,
  .price {
    color: #808991;
  }

  .price {
    font-weight: bold;
    text-align: right;
  }

  .nego {
    margin-right: 5px;
    color: red;
  }

  .priceColor {
    position: absolute;
    right: 0;
    color: #1f8ce6;
  }

  .fa-long-arrow-alt-down {
    margin-left: 3px;
  }
`;