dyttjqdl1145

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

LandingPage가 처음 랜더링될 때, skip 0 limit 8 을 body로 보내잖아요.
그러면 몽고db에서는 0부터 8개까지의 정보만 찾아옵니다.
productInfo는 8개가 되는 거고, postSize 또한&nbsp; productInfo의 길이인 8이 되는 거죠.
그렇기 때문에 랜딩페이지에서의 PostSize도 8이 됩니다. PostSize > Limit 을 할 경우에,
8 > Limit 이 false가 되므로 더보기는 사라지게 되지만, 상품이 9개,10인 경우엔 더보기 버튼이 없기 때문에 loadMoreHandler가 실행되지 않아 추가적으로 상품들을 불러올 수가 없습니다. 그렇기 때문에 PostSize >= Limit 을 하신거 같아요 :)

그래서 이걸 어떻게 해결할 수 있을까 생각해봤는데, 제가 생각한 방법은
처음에 요청을 할 때, body를 빼고 요청을 하고, 전체의 productInfo를 받아옵니다.
그러면 PostSize는 전체 productInfo의 길이가 되고&nbsp;<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">PostSize > Limit 을 했을 때, 
<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">상품이 8개인 경우에 더보기 버튼은 사라지고 9개 이상인 경우에는 더보기버튼이 나타나게 됩니다.
<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">
<span style="background-color: #ffffff; color: #000a12; font-family: 'Noto Sans KR', -apple-system, system-ui, system-ui, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 16px;">그리고 또 수정해야 할 건
getProducts 함수에서 이부분을,
<div style="color: #eeffff; background-color: #263238; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div> } else {</div>
<div> setProducts(response.data.productInfo);</div>
<div> }</div>
<div></div>
</div>
이렇게 slice를 이용해서 0부터 8개까지의 정보만 Products에 저장을 시킵니다.
<div style="color: #eeffff; background-color: #263238; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div> } else {</div>
<div> setProducts(response.data.productInfo.slice(0, 8));</div>
<div> }</div>
<div> </div>
</div>
그러면 처음 랜더링될 때 8개의 정보만 화면에 나오게 됩니다.

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

dyttjqdl1145

投稿