Vue.js로 List를 이용한 CRUD, Pagination, Search - #1 간단한 ListView 구현

이번 포스팅은 간단한 ListView를 Vue.js와 Vuetify 컴포넌트를 이용해서 구현하도록 하겠습니다.

먼저 ListSample.vue 이름의 컴포넌트를 생성하여 진행합니다.

ListSample.vue

template code

<template>
  <v-app id="list-sample">
    <v-flex sm6 offset-sm3>
      <v-list two-line
              v-for="(listItem, index) in listData"
              :key="index">
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title class="text--primary">
              {{ listItem.subject }}
            </v-list-tile-title>
            <v-list-tile-sub-title>
              {{ listItem.desc }}
            </v-list-tile-sub-title>
          </v-list-tile-content>
 
          <v-list-tile-action>
            <v-icon ripple
                    @click="">
              edit
            </v-icon>
            <v-icon ripple
                    @click="">
              delete
            </v-icon>
          </v-list-tile-action>
        </v-list-tile>
        <v-divider></v-divider>
      </v-list>
  </v-app>
</template>

Vuetify 컴포넌트를 이용해서 UI를 구성하였습니다.

Test Data의 subject, desc 내용을 화면에 구성하게 되며 Material UI를 이용해 구성한 icon을 구성하였습니다.

script code

<script>
  export default {
    data() {
      return {
        listData: []
      }
    },
    created() {
      this.axios.get('http://localhost:8080/server/listTest.json')
        .then((response) => {
          this.listData = response.data;
          console.log(this.listData);
        });
    }
  }
</script>

Vue.js 라이프사이클에서 created는 data와 event가 활성화되어 접근 할 수있는 상태이며 위에서 작성한 템플릿과 돔은 랜더링 되어있지 않은 상태라서 접근이 불가능합니다.

보통 created 라이프 사이클에 서버와 통신하여 data 속성들의 값을 초기화하는 코드들이 들어가게 됩니다.

현재 포스팅에서는 created에서 Axios 라이브러리를이용해 앞서 만든 listTest.json을 get으로 호출하여 가져와 data() 속성의 listData로 값을 넣어주게 됩니다.

Vue.js는 data 객체의 있는 속성들의 값이 변경이 일어났을 경우 자동으로 연결된 UI가 갱신되지만

단, 속성 내부 값이 아닌 구성요소가 변경되는건 Vue 인스턴스가 알지 못합니다.

이렇게 되면 한 화면에 100개의 data가 List로 구현되게 되어있습니다.

다음 포스팅에서는 pagination 기능을 추가해서 page를 나눠보도록 하겠습니다.