[vue.js] 페이지처리 (pagination) - 공공데이터 주가지수 페이지단위 호출

0. 목적

-. vue를 이용해 데이터를 일정 단위로 끊어 받아 표현해본다.

-. 주가지수들을 일정 개수 씩 전달받아 표현하는 페이지 처리 기능을 연습한다.

1. 페이지처리

-. 자세히 보면, 이전 포스트에서 불러온 주가지수 목록이, 코스피/코스닥으로 시작하는 것이 아니라 "IT H/W"라는 뜬금없는 지수로 시작하는 것을 알 수 있다. 대체 지수 종류가 몇개나 되길래 저런 뜬금없는것이 있나 싶어서 보니까, 공공데이터에서 76,388 개의 지수 (업종별, 벤처 등 포함)를 제공한다. 그래서, 페이지처리가 필요하다.

1) 페이지 단위로 데이터 호출

-. 한 페이지에 원하는 갯수만큼, 그리고 원하는 페이지를 호출하는 것은 어렵지 않다. 아래 코드처럼 get header에 추가해주거나, 쿼리스트링으로 넣어주면 된다. (근데 헤더에 넣는건 자꾸 오류가 나서 쿼리스트링으로만 해야겠다...)

    getMarketIndexPage(perPage, pageNo) {
        return gonggongIndex.get('/getStockMarketIndex', { headers: {'numOfRows': perPage, 'pageNo': pageNo}} )
        //querystring
        // return gonggongIndex.get('/getStockMarketIndex' + '?numOfRows=' + perPage + '&pageNo=' + pageNo )
    }

-. url로부터 페이지 번호를 받아내는 것은, javascript와 동일하게, route.query.[parameter]로 할 수 있다.

routers/index.js
  {
    path: '/',
    name: 'StockList',
    component: StockList,
    //페이지처리. 만약 페이지에 해당하는 숫자 입력이 없으면 첫 페이지로
    props: route => ({ pageNo: parseInt(route.query.pageNo) || 1 })
  },

-. 지수 목록 페이지에서도 페이지를 파라미터로 넘겨주게 해주자.

-. 그리고 테스트 페이지를 띄우면, 입력한 페이지 번호에 따라 지수 목록이 바뀌는 것을 볼 수 있다. 각 지수에 대한 링크 페이지도 정상적으로 작동함.

2) 페이지 이동 버튼 만들기

-. 페이지 이동 버튼을 만드는건 매우 간단하다. 위에서 pageNo를 받는 작업을 했고, 이미 router-link를 만드는 방법을 안다.

      <div class="page-bar">
        <router-link class="page-button left"
          :to="{ name: 'StockList', query: { pageNo: pageNo - 1 }}"
          v-if="pageNo > 1">
          Prev Page
        </router-link>
        <div class="page-button number-line"></div>
        <router-link class="page-button right"
          :to="{ name: 'StockList', query: { pageNo: pageNo + 1 }}">
          Next Page
        </router-link>
      </div>

-. 스타일을 살짝 만져서 가시성을 좋게 하면, 아래와 같이 페이지 양 끝에 Prev Page / Next Page 버튼이 생긴다.

-. 근데 한가지 문제가 있다. 페이지 이동 버튼을 눌러도 작동을 하지 않는다. 

-. 조금 더 자세히 살펴보면, 주소의 pageNo는 변하는데, 내용이 변하지 않는다. 이것을 해결해야한다.

3) 페이지 버튼 누를 때 화면 갱신하기

-. 페이지 누를 때 화면 갱신하는건 간단하다. 앞의 포스팅에서 다룬 이벤트 핸들링을 응용하면 된다. 나는 pageClick() method를 추가해서 페이지 이동 버튼이 눌릴 때 해당 함수가 실행되게 꾸며봤다.

      <div class="page-bar">
        <router-link class="page-button left"
          :to="{ name: 'StockList', query: { pageNo: pageNo - 1 }}"
          v-if="pageNo > 1" 
          v-on:click="pageClick">
          Prev Page
        </router-link>
        <div class="page-button number-line"></div>
        <router-link class="page-button right"
          :to="{ name: 'StockList', query: { pageNo: pageNo + 1 }}"
          v-on:click="pageClick"> 
          Next Page
        </router-link>
      </div>
      
methods: {
    pageClick() {
    StockService.getMarketIndexList(10, this.pageNo)
    .then(response => {
      console.log(response.data);
      this.stocks = response.data.response.body.items.item;
    })
    .catch(error => {
      console.log(error)
    })
    }
  }

-. 의도한 대로 작동되는 것을 볼 수 있다. 

-. 혹은 vue에서 제공하는 watchEffect를 이용할 수 있다. 파라미터가 변경될 때, watchEffect 내의 함수를 호출하는 메서드이다. 아래와 같이 넣어주면 동일한 결과를 얻을 수 있다.

created() { 
    watchEffect(() => {
      StockService.getMarketIndexList(10, this.pageNo)
      .then(response => {
        console.log(response.data);
        this.stocks = response.data.response.body.items.item;
      })
      .catch(error => {
        console.log(error)
      })
    })
  }

-. 페이징 처리까지 끝낸 깃헙 링크