[Node/React] 쇼핑몰 사이트 만들기 - 06 더보기 버튼 만들기

6-1. 더보기 버튼 만들기

const loadMoreHanlder = () => {
    };

6-2. 더보기 버튼을 위한 onClick Function 만들기

  <button onClick={loadMoreHanlder}>더보기</button>

6-3. SKIP 과 LIMIT을 위한 STATE 만들기

SKIP - 어디서 부터 데이터를 가져 오는지에 대한 위치
처음에는 0 부터 시작 LIMIT이 6이라면 다음 번에는
2rd Skip = 0 + 6

LIMIT - 처음 데이터를 가져올때와 더보기 버튼을 눌러서 가져올때 얼마나 많은 데이터를 한번에 가져오는지

 let limit = req.body.limit ? parseInt(req.body.limit) : 20;
 let skip = req.body.skip ? parseInt(req.body.skip) : 0;

 Product.find(findArgs)
      .populate("writer")
      .sort([[sortBy, order]])
      .skip(skip)
      .limit(limit)
      .exec((err, productInfo) => {
        if (err) return res.status(400).json({ success: false, err });
        return res.status(200).json({
          success: true,
          productInfo,
          postSize: productInfo.length,
        });
      });
  }
});

6-4. 더보기 버튼 기능을 사용하기 위해서 getProduct Route를 바꾸기

const getProducts = (body) => {
    axios.post("/api/product/products", body).then((response) => {
      if (response.data.success) {
        if (body.loadMore) {
          setProducts([...Products, ...response.data.productInfo]);
        } else {
          setProducts(response.data.productInfo);
        }
        setPostSize(response.data.postSize);
      } else {
        alert(" 상품들을 가져오는데 실패 했습니다.");
      }
    });
  };

  const loadMoreHanlder = () => {
    let skip = Skip + Limit;
    let body = {
      skip: skip,
      limit: Limit,
      loadMore: true,
      filters: Filters,
    };

    getProducts(body);
    setSkip(skip);
  };
// 더보기 버튼을 눌렀을때 정보를 더 추가