정중식의 개발공부로그

더보기 버튼 만들기

13 May 2021 | memo

LIMIT와 SKIP

LIMIT과 SKIP은 몽고DB의 메소드 이다.

LIMIT

처음 데이터를 가져올때와 더보기 버튼을 눌러서 가져올때 최대 얼만큼의 데이터를 가져올지 정해주는 메소드이다.

SKIP

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



실제로 해보기

Front 코드

import React, { useEffect, useState } from 'react';
import { FaCode } from 'react-icons/fa';
import axios from 'axios';
import { Icon, Col, Card, Row, Button, Carousel } from 'antd';
import Meta from 'antd/lib/card/Meta';
import ImageSlider from '../../utils/ImageSlider';
function LandingPage() {
  const [Products, setProducts] = useState([]);
  const [Skip, setSkip] = useState(0);
  const [Limit, setLimit] = useState(8);
  const [PostSize, setPostSize] = useState(0);

  useEffect(() => {
    let body = {
      skip: Skip,
      limit: Limit,
    };

    getProducts(body);
  }, []);

  const getProducts = (body) => {
    axios.post('/api/product/products', body).then((response) => {
      if (response.data.success) {
        console.log(response.data.productInfo);
        if (body.loadMore) {
          // 더보기 버튼이 클릭됬을시
          setProducts([...Products, ...response.data.productInfo]);
        } else {
          setProducts(response.data.productInfo);
        }
        setPostSize(response.data.PostSize);
      } else {
        alert('상품들을 가져오는데 실패 했습니다.');
      }
    });
  };

  const loadMoreHandler = () => {
    let skip = Skip + Limit;

    let body = {
      skip: Skip,
      limit: Limit,
      loadMore: true,
    };

    getProducts(body);
    setSkip(skip);
  };

  const renderCards = Products.map((product, index) => {
    return (
      <Col lg={6} md={8} xs={24} key={index}>
        <Card cover={<ImageSlider images={product.images} />}>
          <Meta title={product.title} description={`$${product.price}`} />
        </Card>
      </Col>
    );
  });

  return (
    <div style=>
      <div style=>
        <h2>
          Let's Travel Anywhere
          <Icon type='rocket' />
        </h2>
      </div>

      {/* Filter */}

      {/* Search */}
      <Row gutter={[16, 16]}>{renderCards}</Row>

      <br />

      {PostSize >= Limit && (
        <div style=>
          <Button onClick={loadMoreHandler}>더보기</Button>
        </div>
      )}
    </div>
  );
}

export default LandingPage;

PostSize를 Limit과 비교하여 더보기 버튼의 모습을 보여줄지 말지 정해준다.
PostSize는 서버쪽에서 받아오는 전체 게시글의 갯수다. (배열로 넘어와짐)

Server 코드

router.post('/products', (req, res) => {
  // product collection에 들어 있는 모든 상품 정보를 가져오기

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

  Product.find()
    .populate('writer')
    .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 });
    });
});



비교적 간단한 코드들로 구성되어있고, 완벽한 코드는 아니다.
강의의 질문들을 보면 몇개의 허점들이 있는듯하지만, 초보자가 원리를 파악하는데에 도움이 되는것 같고 이런식으로 적용을 해보고 스스로 허점들을 고쳐나가는 방향으로 나아간다면 이것이야 말로 폭풍성장의 비결이 아닐까?

Related Posts