쇼핑몰 사이트 만들기14(더보기 버튼 만들기2)

저희가 저번에는 더보기를 누르지 않은이상 기본적으로 최대 8개의 아이템을 화면에 보여줬는데용. 요번에는 그 더보기 버튼을 눌렀을 경우 최대 8개의 아이템을 추가적으로 보여주는 부분을 처리해주겠습니다

 

. 그 함수에서 axio.post 부분은 똑같이 해줄거고 그리고 body 부분은 일단 전과 똑같이 동일하게 8개를 가져오는거니 limit은 똑같이 해주고 실행 시점이 다르기 대문에 skip을 다르게 해줍니다.

결과:

더보기 버튼을 눌렀을 경우에 저렇게 그 다음 더 있는 아이템 최대 8개중있는 것들이 뜹니다. 그런데 전 아이템들은 안뜨죠. 전 아이템 아래에 추가적으로 아이템들이 뜨게 설정을 해줄 것입니다.

 

원래 그전에 있던 8개의 Product를 넣고 그 이후에 추가적으로 넣습니다.

 

 

 

결과:

이제는 그 전 아이템에 추가적으로 아이템을 뜨게 해준 것을 확인할 수 있습니다.

 

 

 

 

저희가 그 마지막으로 해줄 것은 더이상 불러올 상품이 없을 때는 더보기 버튼이 안 보이게 바꿔줄 것입니다.

 

LandingPage.js

 

product.js

이제 더이상 보여줄 상품이 없으니 더보기가 안 뜨는 것을 확인할 수 있습니다.