리뷰 5개씩 보여주고 더보기 띄우는 페이지네이션

이때까지 했던 페이지네이션은 페이지 쿼리를 따로 줘서 페이지 이동을 시켰음. 그런데 더보기로 띄우는건 페이지가 나눠져 있는게 아님. 사실상 페이지네이션이 아님...

원래 페이지네이션은 백에서 가져올때 원하는 갯수 만큼 자른다음에 skip할 값도 정해줘야하지만 나는 페이지 이동 시킬것이 아니므로...
백에서 전체 데이터를 다 보내고 프론트에서도 일단 다 받은다음에
length로 잘라서 5개만 띄우고 더보기 버튼 누를때 마다 html에 append 해보자

• 해결
  html에 append 할 필요 없이 review를 n개 담은 새로운 변수(displayedReview)를 만들었고 n을 새로운 변수(visibleCount)에 담아서 초기값은 5, 더보기 버튼 클릭할때마다 5씩 증가하도록 만들었음

// html
<div class="reviewBody" v-for="(tmp, outterIndex) in state.displayedReview" :key="outterIndex">
<button v-if="state.displayedReview.length < state.review.length" @click="showMore()">
  더보기
<button>

// 변수 설정 
const state = reactive({
  review: [],
  displayedReview: [],
  visibleCount: 5,
});

// 리뷰 데이터 읽어오기
const handleReviewData = async () => {
  // 데이터 받아오는 코드 생략
  if (data.status === 200) {
    state.review = data.result;
    // 리뷰 5개씩 보이도록
    state.displayedReview = state.review.slice(0, state.visibleCount);
};
  
// 리뷰 더보기
const showMore = () => {
  state.visibleCount += 5;
  state.displayedReview = state.review.slice(0, state.visibleCount);
}