컴포넌트 분리기

컴포넌트를 분리하던중 깨닳은것을 적고자한다

import React from "react";
import Pagenation from "../common/Pagenation";
import SearchBox from "../common/SearchBox";
import heart from "../../images/icon/heart.svg";
import "./../css/ProductList.css";
import { Link } from "react-router-dom";

const Product = ({ productLists }) => {
  return (
    <>
      {productLists?.map((data) => (
        <div key={data.id} className="product-card">
          <Link to={`${data.id}`}>
            <img src={data.images[0]} className="card-img" alt="대표사진"></img>
            <div className="product-card__cardinfo">
              <div className="name">{data.name}</div>
              <div className="price">{data.price}</div>
              <div className="count">
                <img
                  className="product-card_image-logo"
                  src={heart}
                  alt="즐겨찾기"
                />
                {data.favoriteCount}
              </div>
            </div>
          </Link>
        </div>
      ))}
    </>
  );
};

const ProductList = ({
  sortedItems,
  page,
  onChangeSort,
  onClickPage,
  gridRows,
  label,
  isLoading,
  ispageNation, //페이지네이션 (true 일시 제공)
  issearch, //검색버튼 (true 일시 제공)
}) => {
  return (
    <div className="all-product">
      <section>
        <div className={issearch ? "topbar between" : "topbar"}>
          <div className="topbar-label">{label}</div>
          {issearch && <SearchBox onChangeSort={onChangeSort} />}
        </div>
        {/* {isLoading ? (
          <div className="loading">Loading...</div>
        ) : ( */}
        <div className={`product-cardlist__${gridRows}row`}>
          <Product productLists={sortedItems} />   // 수정해야할부분!
        </div>
        {/* )} */}
      </section>
      {ispageNation && (
        <div className="all-product__bottom">
          <Pagenation onPage={page} onClickPage={onClickPage} />
        </div>
      )}
    </div>
  );
};

export default ProductList;

 

 

위에는 product라는 카드 하나의 컴포넌트와

아래는 productList 카드를 묶은 리스트 컴포넌트인데

 

코드 리뷰를 받던중 Product 컴포넌트에서 반복문을 돌리고있었다.

 

이렇게보면 리스트에서 Product 컴포넌트를 반복시켜서 컴포넌트를 렌더링해야하는데

위치가 잘못된것이다. 

 

위치를 생각하면서 개발을하자!~