Product List 리팩토링 🔧

삼항연산자 중첩 지양!

productCadr.js

• 삼항연산자안에서 또 삼항연산자를 써버려서 코드가독성이 너무 떨어져 버렸다..
  
  

코드 수정 전

   {item.stock === 0 ? (
    <button disabled type="button">
     Out of stock
    </button>
   ) : typeof item.displayPrice === 'string' ? (
    <button type="button">Select</button>
   ) : (
    <button type="button">Add</button>
   )}

코드 수정 후 ✨

   {item.stock === 0 ? (
     <button disabled type="button">
      Out of stock
     </button>
    ) : (
     <button type="button">
      {typeof item.displayPrice === 'string' ? 'Select' : 'Add'}
     </button>
    )}

map 함수에서 return 전에 조건부 렌더링 해주기

productCadr.js

• 위의 코드에서 item.stock 과 item.displayPrice 에 관해 조건을 따지는 로직을 map함수 안에서 return 전에 다로 작성해서 조건부 렌더링으로 구현해보기!!!

코드 수정 전

 {cardInfo.item.map(item => {
          return (
            <div
              className="productCard"
              key={item.id}
              onClick={() => console.log(item)}
            >
              <div className="productCard__header">
                {item.isNew && <span className="new">NEW</span>}
                <img src={item.imageUrl} alt="product image" />
                <div className="symbols">
                  {item.symbolUrl.map(symbolSrc => {
                    return <img src={symbolSrc} alt="" />;
                  })}
                </div>
              </div>
              <div className="productCard__text-block">
                <h2>{item.displayTitle}</h2>
                <p>{item.subtitle}</p>
                <ul>
                  {item.description.map(text => {
                    return <li>{text}</li>;
                  })}
                </ul>
              </div>
              <div className="productCard__bottom">
                <p>${item.displayPrice}</p>
                {item.stock === 0 ? (
                  <button disabled type="button">
                    Out of stock
                  </button>
                ) : (
                  <button type="button">
                    {typeof item.displayPrice === 'string' ? 'Select' : 'Add'}
                  </button>
                )}
              </div>
            </div>
          );
        })}

코드 수정 후 ✨
→ 🤔 이렇게 하는게 맞는지 잘 모르겠다 ㅎㅎ

 {cardInfo.item.map(item => {
          const outOfStock = item.stock === 0;
          const isPriceTypeString = typeof item.displayPrice === 'string';

          return (
            <div
              className="productCard"
              key={item.id}
              onClick={() => console.log(item)}
            >
              <div className="productCard__header">
                {item.isNew && <span className="new">NEW</span>}
                <img src={item.imageUrl} alt="product image" />
                <div className="symbols">
                  {item.symbolUrl.map(symbolSrc => {
                    return <img src={symbolSrc} alt="" />;
                  })}
                </div>
              </div>
              <div className="productCard__text-block">
                <h2>{item.displayTitle}</h2>
                <p>{item.subtitle}</p>
                <ul>
                  {item.description.map(text => {
                    return <li>{text}</li>;
                  })}
                </ul>
              </div>
              <div className="productCard__bottom">
                <p>${item.displayPrice}</p>
                {outOfStock ? (
                  <button disabled type="button">
                    Out of stock
                  </button>
                ) : (
                  <button type="button">
                    {isPriceTypeString ? 'Select' : 'Add'}
                  </button>
                )}
              </div>
            </div>
          );
        })}

React children 사용해보기

productCadr.js

• 같은 레이아웃 안에 다른 내용의 콘텐츠가 들어가있는 경우에는 React children 을 사용해보자!

코드 수정 전

    if (selectedCategory === 'category') {
      return (
        <div className="productCardsGroup">
          <h1>Vitamins</h1>
          {productDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}

          <h1>Powders</h1>
          {powderDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}
        </div>
      );
    } else {
      return (
        <div className="productCardsGroup">
          <h1>Eyes</h1>
          {powderDatas.map(cardInfo => {
            return <ProductCards cardInfo={cardInfo} />;
          })}
        </div>
      );
    }