🍎기본값을 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" }
];