더보기 버튼 아이템 딱 8개 일 때

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

더보기 버튼 만들기 #2[삭제 예정]

작성

287

안녕하세요!

카드 아이템이 딱 8개일 때는 더보기 버튼이 안 보여야하는데,

보이는 걸 해결하려면 PostSize >= Limit이 아니라 PostSize > Limit 으로 하면

될 줄알았는데, 안되더라구요! 왜 그런지 설명해주시면 감사하겠습니다!

{PostSize >= Limit && (
<div style={{ justifyContent: 'center' }}>
<button onClick={loadMoreHandler}>LOAD MORE</button>
</div>
)}

nodejs mongodb react redux 웹앱

답변 5

신지호

이 질문 보고 저도 고민하다가 해결방법을 찾아서 답변 드립니다!

LandingPage가 처음 랜더링될 때, skip 0 limit 8 을 body로 보내잖아요.

그러면 몽고db에서는 0부터 8개까지의 정보만 찾아옵니다.

productInfo는 8개가 되는 거고, postSize 또한 productInfo의 길이인 8이 되는 거죠.

그렇기 때문에 랜딩페이지에서의 PostSize도 8이 됩니다. PostSize > Limit 을 할 경우에,

8 > Limit 이 false가 되므로 더보기는 사라지게 되지만, 상품이 9개,10인 경우엔 더보기 버튼이 없기 때문에 loadMoreHandler가 실행되지 않아 추가적으로 상품들을 불러올 수가 없습니다. 그렇기 때문에 PostSize >= Limit 을 하신거 같아요 :)

그래서 이걸 어떻게 해결할 수 있을까 생각해봤는데, 제가 생각한 방법은

처음에 요청을 할 때, body를 빼고 요청을 하고, 전체의 productInfo를 받아옵니다.

그러면 PostSize는 전체 productInfo의 길이가 되고 PostSize > Limit 을 했을 때,

상품이 8개인 경우에 더보기 버튼은 사라지고 9개 이상인 경우에는 더보기버튼이 나타나게 됩니다.

그리고 또 수정해야 할 건

getProducts 함수에서 이부분을,

 } else {
 setProducts(response.data.productInfo);
 }

이렇게 slice를 이용해서 0부터 8개까지의 정보만 Products에 저장을 시킵니다.

 } else {
 setProducts(response.data.productInfo.slice(0, 8));
 }
 

그러면 처음 랜더링될 때 8개의 정보만 화면에 나오게 됩니다.

나머지는 그대로 하시면 됩니다.

오쯔

그래서 제가 생각한 해결법은 서버 쪽에서 다음 상품이 있는지 찾고 있으면 false, 0개이면 true 를 반환하는 쪽이 좋지 않을까 의견을 드립니다!

Product.find()
        .populate("writer")
        .skip(skip)
        .limit(limit)
        .exec((err, productInfo) => {
            if (err) return res.status(400).json({ success: false, err });
            Product.find()
                .skip(skip + limit)
                .limit(limit)
                .exec((err, next) => {
                    return res.status(200).json({
                        success: true,
                        productInfo,
                        postSize: productInfo.length,
                        next: next.length === 0,
                    });
                });
       });