vue3 페이지네이션

왜 사용하는가?

처음에 데이터를 로딩할 때 수천 수만개의 데이터를 한번에 로드하면 서버에 부담이가고 페이지 로딩이 느려지므로 사용자에 편의성을 위해 사용

json-server 패키지에 페이지네이션 기능이 존재

GET /posts?_page=7&_limit=20 으로 작성 (로딩할 페이지 번호, 한번에 불러올 데이터의 갯수)

데이터는 로딩이 되었으나 뒤에 존재하는 데이터는 확인할 수 가 없어 버튼이 필요

동적으로 페이지 버튼을 관리하기 위해서는 page 번호와 limit를 변수로써 관리하고 res.headers[’x-total-count’] 에 있는 총 데이터의 갯수에 따라 페이지 버튼 갯수를 정한다

pagination(template)

<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li v-if="currentPage !== 1" class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li v-for="page in numberOfPages" :key="page" class="page-item" :class="currentPage === page ? 'active' : ''"><a class="page-link" href="#" @click="getTodos(page)">**왜 사용하는가?**

처음에 데이터를 로딩할 때 수천 수만개의 데이터를 한번에 로드하면 서버에 부담이가고 페이지 로딩이 느려지므로 사용자에 편의성을 위해 사용

`json-server` 패키지에 페이지네이션 기능이 존재

`GET /posts?_page=7&_limit=20` 으로 작성 (로딩할 페이지 번호, 한번에 불러올 데이터의 갯수)

데이터는 로딩이 되었으나 뒤에 존재하는 데이터는 확인할 수 가 없어 버튼이 필요

동적으로 페이지 버튼을 관리하기 위해서는 **page 번호와 limit를 변수로써 관리**하고 `res.headers[’x-total-count’]` 에 있는 총 데이터의 갯수에 따라 페이지 버튼 갯수를 정한다

**pagination(template)**

```html
<nav aria-label="Page navigation example">
    <ul class="pagination">
      <li v-if="currentPage !== 1" class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li v-for="page in numberOfPages" :key="page" class="page-item" :class="currentPage === page ? 'active' : ''"><a class="page-link" href="#" @click="getTodos(page)">{{ page }}</a></li>
      <li v-if="currentPage !== numberOfPages" class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>

pagination(script)

const numberOfTodos = ref(0)
const limit = 5
const currentPage = ref(1)

// 전체 페이지 갯수
const numberOfPages = computed(() => {
  // 올림을 하기위해 사용
  return Math.ceil(numberOfTodos.value / limit)
})

// 페이지 리스트 가져오는 함수
const getTodos = async (page = currentPage.value) => {
  try {
    const res = await axios.get(`http://localhost:3000/todos?_page=${page}&_limit=${limit}`)
    numberOfTodos.value = res.headers['x-total-count']
    todos.value = res.data
    currentPage.value = page
  } catch (err) {
    error.value = 'Something went wrong'
  } 
}

getTodos()
```</a></li>
      <li v-if="currentPage !== numberOfPages" class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>

pagination(script)

const numberOfTodos = ref(0)
const limit = 5
const currentPage = ref(1)

// 전체 페이지 갯수
const numberOfPages = computed(() => {
  // 올림을 하기위해 사용
  return Math.ceil(numberOfTodos.value / limit)
})

// 페이지 리스트 가져오는 함수
const getTodos = async (page = currentPage.value) => {
  try {
    const res = await axios.get(`http://localhost:3000/todos?_page=${page}&_limit=${limit}`)
    numberOfTodos.value = res.headers['x-total-count']
    todos.value = res.data
    currentPage.value = page
  } catch (err) {
    error.value = 'Something went wrong'
  } 
}

getTodos()