OnlineShop 만들기 - 5) Landing Page 만들기 2(loadmore 버튼)

loadmore 버튼을 만들고 몇가지 특징을 더해주자.

 

 

여기서 skip은 우리가 가져온 데이터 다음 순서부터 limit개의 데이터를 가져와서 로드해줘야 한다는 뜻이다.

 

먼저 loadmore 기능을 구현한다. 

여기서 skip과 limit의 state이 필요하다(어디서부터 어디까지 몇개의 데이터를 로드해줄지 나타내야 하기 때문에)

    const [Skip, setSkip] = useState(0)
    const [Limit, setLimit] = useState(8)
    
    
    
    const onLoadMore = () => {
        let skip = Skip + Limit;

        const variables = {
            skip: skip,
            limit: Limit,
            loadMore: true,
            filters: Filters,
            searchTerm: SearchTerms
        }
        getProducts(variables)//데이터를 가져오는 것은 이전의 것과 동일하다. getProducts Axios를 따로 빼서 재생해주자.이전의 것과 다른 것은 variable밖에 없으므로 이것만 바꿔서 넣어준다.
        setSkip(skip)//limit개의 데이터를 가져왔으면 다음에는 그 다음번 순서부터 가져와야하므로 set을 해준다.
    }
    
    
    
    
    
            {PostSize >= Limit &&
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <button onClick={onLoadMore}>Load More</button>
                </div>
            }

반복되는 부분은 따로 빼서 쓴다. 

getProducts 함수를 만들자.

여기서 더이상 업로드해줄 데이터가 없으면 loadmore 버튼이 나타나지 않게해줘야 한다. 

 

   const [PostSize, setPostSize] = useState()//로드된 총 포스트의 사이즈

  
        const getProducts = (variables) => {
              Axios.post('/api/product/getProducts', variables)
                  .then(response => {
                      if (response.data.success) {
                          if (variables.loadMore) {//loadmore 버튼이 true라면 
                              setProducts([...Products, ...response.data.products])//원래 있던 것에 더해서 만들어준다.
                          } else {
                              setProducts(response.data.products)//아니라면 더하지 않고 그상태그대로만 보여준다.
                          }
                          setPostSize(response.data.postSize)
                      } else {
                          alert('Failed to fectch product datas')
                      }
                  })
          }
          
          
          {PostSize >= Limit &&//limit보다 더 많이 남아있을 때만 loadmore 버튼이 뜨도록 설정
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <button onClick={onLoadMore}>Load More</button>
                </div>
            }

 

variables에 따라서 기능이 달라져야 하므로 route도 수정해준다.

또한 업로드된 총 포스트 사이즈가 8개 일때만(한번에 업로드할 수 있는 갯수) loadmore 버튼이 뜨도록 한다.

 

router.get("/getProducts",  (req, res) => {
    //variables가 있을때와 없을 때를 나눈다.
    let order = req.body.order ? req.body.order : "desc";
    let sortBy = req.body.sortBy ? req.body.sortBy : "_id";
    let limit = req.body.limit ? parseInt(req.body.limit) : 100;
    let skip = parseInt(req.body.skip);

    Product.find()
    	.populate("writer")
        .sort([[sortBy, order]])
        .skip(skip)
        .limit(limit)
        .exec((err, products)=>{
            if(err) return res.status(400).json({success:false, err})
            res.status(200).json({success:true, products, postSize:products.length})//업로드하는 갯수를 보내준다.
        })

});