Vue.js로 간단한 페이징 구현

안녕하세요!

 

오늘은 Vue.js로 간단한 페이징을 구현해보려합니다~

 

 

되게 간단하게 할 수 있지만, 저는 vue-cli를 이용하여 구현하겠습니다.

 

 설정이 기억나지 않으시는 분들은 이 글을 참고해주세요!

http://pewww.tistory.com/2

 

 

일단 전체적인 완성 모습은 아래의 사진과 같습니다.

(디자인은 무시해주세요..ㅎ)

 

테이블을 구성하는 데이터들은 연락처서비스 API에서 불러왔습니다.

http://sample.bmaster.kro.kr/

 

그럼 긴 말 할 것 없이 코드로 설명드리겠습니다!

 

 

중요하게 봐야될 것은 딱 2가지라고 할 수 있습니다.

 

첫 번째는 바로 created 부분입니다.

코드를 보시면 axios를 사용하여 통신을 하고 있는 것을 알 수 있습니다.

성공 시 응답 데이터의 contacts를 pageArray에 저장합니다.

 

두 번째는 <paginated-list /> 입니다.

4 번째 줄을 보시면 paginated-list라는 컴포넌트에 pageArray를 넘기는 모습을 볼 수 있습니다.

기능별로 컴포넌트를 나누고 구분짓기 위해 SimplePagination.vue와 PaginatedList.vue로 분리하였습니다.

 

 

 

차근차근 설명해보겠습니다!

 

1. 부모 컴포넌트에서 받은 데이터인 pageArray를 listArray에 저장합니다.

listArray는 [{}, {}, {}, {}, {}....{}] 이렇게 구성되어 있으며 기본적인 Length는 100입니다. (총 게시물의 수)

(통신 시 totalCount를 넘겨받을 수도 있지만, 이해를 돕기 위해 Length로 처리하였습니다.)

 

 

2. pageSize는 부모 컴포넌트에서 전달받지 않았다면, 자동적으로 10으로 설정됩니다.

여기서 pageSize란 한 페이지에 출력될 게시물의 수를 의미합니다.

 

 

3. computed의 pageCount()는 총 페이지를 계산하는 함수입니다.

기본적으로 (총 게시물 수 / 한 페이지에 출력될 게시물의 수) 를 할 시 계산이 가능합니다.

 

하지만, 만약 나머지가 정확이 0이 떨어지는 경우가 아니라면 문제가 생기게 됩니다.

예를 들어, 총 게시물의 수가 115개이고 한 페이지에 10개씩 보여진다고 할 때, 위의 식대로 하면 총 11페이지가 만들어지고 남은 5개의 게시물은 그대로 눈에 보이지 않게 됩니다.

 

그렇기 때문에, 만약 나머지가 0보다 클시 page를 1 증가시켜 주는 것입니다.

 

 

4. computed의 paginatedData()는 한 페이지에 보여질 데이터들을 전달해주는 함수입니다.

코드를 보시면서 아래 글을 읽어주세요.

 

일단 기본적으로 start는 this.pageNum * this.pageSize 즉, 0 * 10 = 0이 됩니다.

그리고 end는 start + this.pageSize -> 0 + 10 = 10이 되겠죠.

return 구문은 코드 그대로 listArray의 0 부터 9번째 인덱스까지 복사하여 값을 전달해준다는 의미입니다.

 

만약 pageNum이 1이 증가했다면 어떻게 될까요?

start는 1 * 10 = 10, end는 10 + 10 = 20이 되어 return 값은 listArray의 10부터 19번 인덱스까지 복사한 배열일 것입니다.

 

이를 통해 알 수 있듯이 paginatedData()는 자신이 설정한 페이지 크기에 맞춰 데이터들을 반환시켜주는 역할을 하는 것이죠!

 

 

5. 페이지를 이동시킬 수 있는 버튼 부분입니다.

버튼은 총 2가지, 이전 버튼(Prev-Button)과 다음 버튼(Next-Button)으로 나뉩니다.

말 그대로 한 페이지씩 넘기는 역할을 수행하며, pageNum을 1씩 증가 혹은 감소시키는 동작을 합니다.

 

버튼을 클릭할 시 pageNum가 변경되고, 데이터를 전달해주는 paginatedData가 pageNum에 따라 보여주는 내용을

달리하기 때문에 중요한 역할을 수행한다고 할 수 있습니다.

 

 

6. 마지막, 데이터를 불러오는 부분입니다.

paginatedData에서 데이터를 불러와 리스트들을 렌더링하며, 고유한 키 값으로 paginatedData의 no를 설정하였습니다.

 

 

지금까지 간단한 페이징 구현을 해봤습니다!

페이징 기법은 정말 다양하지만, 그 기법을 감싸는 틀은 고정적인 것 같습니다.

기본적이면서 중요한 부분이니 이번 기회에 대충 어떤 것인지 감이라도 잡고 가셨으면 합니다.

 

수정이나 질문할 것이 있으면 언제든 코멘트 남겨주세요!!

봐주셔서 정말 감사합니다!