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

Question

안녕하세요! 카드 아이템이 딱 8개일 때는 더보기 버튼이 안 보여야하는데, 보이는 걸 해결하려면 PostSize >= Limit이 아니라 PostSize > Limit 으로 하면 될 줄알았는데, 안되더라구요! 왜 그런지 설명해주시면 감사하겠습니다! { PostSize >= Limit && ( < div style ={{ justifyContent : ' center ' }} > < button onClick ={ loadMoreHandler } > LOAD MORE ) }

신지호 · Answer

이 질문 보고 저도 고민하다가 해결방법을 찾아서 답변 드립니다! 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개의 정보만 화면에 나오게 됩니다. 나머지는 그대로 하시면 됩니다.

오쯔 · Answer

그래서 제가 생각한 해결법은 서버 쪽에서 다음 상품이 있는지 찾고 있으면 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 ,                     });                 });        });

오쯔 · Answer

제가 잘 이해를 못했을 수도 있습니다!. 그런데 의문점이 있어서 제가 생각한 것들을 말씀드릴게요! 8개의 상품이 있을 때는 답변해주신 분 의도대로 더보기가 안보이지만 만약 16개의 상품이면 처음에 더보기가 당연히 보일것이고 그 다음 더보기를 누르면 8개의 상품이 나오는데 그때 더보기가 보이지 않나요??? 그리고 처음에 한번에 전체 데이터가 8개 이상인지 가져오신다고 하셨는데, 만약 100000개가 넘는 데이터가 있다면 처음에 렌더링을 할때 100000개의 데이터를 다 찾아봐서 서버에 무리가 될수 있을 것이라고 생각합니다. ㅠㅠ

John Ahn · Answer

앗 저도 배우고 가네요 ^^  너무 좋은 질문과 답변 감사합니다 ~~~~!!!!!!

Minji Lee · Answer

우와! 초보라 어려웠는데, 한번에 이해가 잘되네요!! 해결방법 까지..답변 너무 감사드립니다!! :D 좋은 주말 되세요!!~