삼항연산자, 조건부 렌더링

1차 프로젝트에서 정말 많이 활용한 조건부 렌더링

1. ProductsList.js 파일

 return (
    <div className="productsList">
      <div className="headerTitle">
        <Link to="/">
          <img
            src="/images/logo-darkgray.png"
            alt="wesopLogo"
            className="wesopLogo"
          />
        </Link>
      </div>

      <div className="categoryTitle">
        <h1 className="categoryTitleHeader"> 스킨 </h1>
      </div>

      <SubcatNav setCategoryId={setCategoryId} subcategory={subcategory} />

      {categoryId ? (
        <SubcatProductsList productsList={productsList} />
      ) : (
        <SkinProductsList
          setCategoryId={setCategoryId}
          productsList={productsList}
        />
      )}

2. 상품 사이즈 별 조건부 렌더링

{detail.length === 1 ? (
              <>
                <span className="size">{detail[0].size} </span>
                <span>/</span>
                <span className="price">
                  <span> ₩ </span>
                  {(+detail[0].price).toLocaleString()}
                </span>
              </>
            ) : (
              <div className="size">
                <input
                  className="selectedButton"
                  type="radio"
                  name="size"
                  value={detail[0].size}
                />
                <label className="selectedSize">{detail[0].size}</label>

                <input
                  className="selectedButton"
                  type="radio"
                  name="size"
                  value={detail[1].size}
                />
                <label className="selectedSize">{detail[1].size}</label>
              </div>
            )}