react 리스트 클릭하면 해당 컨텐츠 보여주기

쇼핑몰사이트에 들어가보면 여러개의 리스트들이 있고 클릭하면 해당하는 카테고리의 내용들이 보이게되는데
퍼블 작업할때 기능구현은 안해서 전달드리는데, 한번 리액트로 해보고 싶어서 하게되었다.
실제 데이터가 아닌 임의로 state를 만들었다.

검색안하고 해보려고 하니까 너무 어려워서 회사 개발자분한테 여쭤보면서 했다. 한분은 내가 하고 싶은거를 그대로 작업 해주셨다.
어떻게 작업했는지, 어떻게해야하는지 잘 알려주셨다.
내가 한 작업은 아니지만 다음에 할때는 알려주신 내용 토대로 까먹지 말고 해봐야겠다.

App.js

import "./styles.css";

import { useState } from "react";
const App = () => {

  const [category, setCategory] = useState({
    active: "all",
    list: [
      { id: 0, type: "all", name: "전체" },
      { id: 1, type: "bag", name: "가방" },
      { id: 2, type: "glasses", name: "안경" },
      { id: 3, type: "cream", name: "핸드크림" },
      { id: 4, type: "snack", name: "초코과자" },
      { id: 5, type: "tissue", name: "휴지" },
      { id: 6, type: "necklace", name: "목걸이" }
    ]
  });

  const [productList, setProductList] = useState([
    {
      type: "bag",
      itemList: [
        {
          brand: "가방 브랜드1",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "가방 브랜드2",
          title: "못생긴 가방",
          price: "55,000"
        },
        {
          brand: "가방 브랜드3",
          title: "화려한 가방",
          price: "55,555,000"
        },
        {
          brand: "가방 브랜드4",
          title: "화려한 가방",
          price: "55,555,000"
        },
        {
          brand: "가방 브랜드5",
          title: "화려한 가방",
          price: "55,555,000"
        },
        {
          brand: "가방 브랜드6",
          title: "화려한 가방",
          price: "55,555,000"
        },
        {
          brand: "가방 브랜드7",
          title: "화려한 가방",
          price: "55,555,000"
        }
      ]
    },
    {
      type: "glasses",
      itemList: [
        {
          brand: "안경 브랜드1",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드2",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드3",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드4",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드5",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드6",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드7",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드8",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드9",
          title: "똥그란 안경",
          price: "155,000"
        },
        {
          brand: "안경 브랜드10",
          title: "똥그란 안경",
          price: "155,000"
        }
      ]
    },
    {
      type: "cream",
      itemList: [
        {
          brand: "핸드크림 브랜드1",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "핸드크림 브랜드2",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "핸드크림 브랜드3",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "핸드크림 브랜드4",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "핸드크림 브랜드5",
          title: "멋진 가방",
          price: "1,155,000"
        }
      ]
    },
    {
      type: "snack",
      itemList: [
        {
          brand: "과자 브랜드1",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드2",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드3",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드4",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드5",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드6",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "과자 브랜드7",
          title: "멋진 가방",
          price: "1,155,000"
        }
      ]
    },
    {
      type: "tissue",
      itemList: [
        {
          brand: "휴지 브랜드1",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "휴지 브랜드2",
          title: "멋진 가방",
          price: "1,155,000"
        }
      ]
    },
    {
      type: "necklace",
      itemList: [
        {
          brand: "목걸이 브랜드1",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드2",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드3",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드4",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드5",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드6",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드7",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드8",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드9",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드10",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드11",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드12",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드13",
          title: "멋진 가방",
          price: "1,155,000"
        },
        {
          brand: "목걸이 브랜드14",
          title: "멋진 가방",
          price: "1,155,000"
        }
      ]
    }
  ]);

  return (
    <div className="wrap">
      <div className="btn_list">
        {category.list.map((cate) => (
          <div
            className={`btn ${category.active === cate.type ? "on" : ""}`}
            key={cate.id}
            onClick={() => setCategory({ ...category, active: cate.type })}
          >
            {cate.name}
          </div>
        ))}

      {category.active === "all" && (
        <div className="content_wrap">
          <div className="content_list">
            {productList.map((item) =>
              item.itemList.map((prod, idx) => (
                <div className="content" key={idx}>
                  <p className="brand">{prod.brand}</p>
                  <p className="title">{prod.title}</p>
                  <p className="price">{prod.price}</p>
                </div>
              ))
            )}
          </div>
        </div>
      )}
      {productList.map(
        (item) =>
          category.active === item.type && (
            <div className="content_wrap">
              <div className="content_list">
                {item.itemList.map((prod, idx) => (
                  <div className="content" key={idx}>
                    <p className="brand">{prod.brand}</p>
                    <p className="title">{prod.title}</p>
                    <p className="price">{prod.price}</p>
                  </div>
                ))}
              </div>
            </div>
          )
      )}
    </div>
  );
};

export default App;

styles.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrap {
  width: 700px;
  margin: 0 auto;
}

.btn_list {
  display: flex;
  gap: 10px;
}

.btn {
  cursor: pointer;
  padding: 10px;
  border: 1px solid black;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  margin-top: 50px;
}

.content > div {
  border: 1px solid orange;
}

.btn.on {
  background: orange;
  color: #fff;
  border: 1px solid orange;
}

.content_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.content {
  border: 1px solid black;
  border-radius: 10px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.brand {
  font-size: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.price {
  font-size: 16px;
}