알고리즘 사고 훈련 및 패턴

Bitnara Lee·2021년 5월 29일

🍎기본값을 null 혹은 undefined로 주고 비교값과 비교, 값을 주는 방식

function ProductTable({ products, text, check }) {
  const [filterText, setFilterText] = text;
  const [isStockOnly, setIsStockOnly] = check;

  const rows = [];
  let lastCategory = null; // 임의로 지정

  products.forEach((product) => {
    if (product.name.indexOf(filterText) === -1) {
      return;
    }
    if (isStockOnly && !product.stocked) {
      return;
    }

    if (product.category !== lastCategory) {
      rows.push(
        <ProductCategoryRow
          category={product.category}
          key={product.category}
        />
      );
    }                
    rows.push(<ProductRow product={product} key={product.name} />);
    lastCategory = product.category;
  });
// ex) 첫번째 비교에서 "Sporting Goods"는 null이 아니므로 수행
//     끝나고 lastCategory에 현재 category 값 할당
//     두번째 비교에서 새로운 category값("Electronics")은 lastCategory값("Sporting Goods")과 다름    

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );

====================================================================
const PRODUCTS = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football"
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball"
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball"
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch"
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5"
  },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
];
profile
Creative Developer

0개의 댓글