Vue Datagrid 컴포넌트를 Vue Composition API와 함께 사용하는 방법 > 블로그 & Tips

본문 바로가기

Vue Datagrid 컴포넌트를 Vue Composition API와 함께 사용하는 방법

페이지 정보

작성자 GrapeCity 작성일 22-04-15 10:46 조회 944회 댓글 0건

본문

Vue 3 및 Vue의 Composition API가 출시되었을 때 API의 새로운 기능을 이용하고 코드 구성, 가독성, 재사용 가능성을 개선하여 개발자가 큰 규모의 응용 프로그램을 보다 효율적으로 관리할 수 있도록 하는 방법을 발표했습니다.


이 문서에서는 Composition API를 Wijmo의 컴포넌트 라이브러리와 함께 사용하여 Vue Datagrid를 쉽게 만들고 관리하는 법을 알아보겠습니다.


복습을 위해 Vue 응용 프로그램에서 Composition API를 사용하는 방법을 잠깐 살펴보겠습니다. 그런 다음에는 Wijmo의 Vue Datagrid인 FlexGrid를 응용 프로그램에 결합하는 방법을 설명합니다.


Composition API


Vue에서 컴포넌트를 만들면 컴포넌트 옵션(data, computed, methods, watch 등)에 의해 분리됩니다.

export default {
  components: { ... } // List of components that our component will be using
  props: {
      user: {
          type: String,
          required: true
      }
  },
  data() {
      return {
          users: [],
          filters: { ... },
          query: '',
      }
  },
  methods: {
      getUser() {
          // get the user based on our 'user' prop
      },
      getUserList() {
          // get list of users associated with current user
      },
      updateUser() {
          // updates users values
      },
      deleteUser() {
          // deletes user from db
      }
  },
  mounted() {
      this.getUser()
  }
}


이러한 조직 논리 유형이 대부분의 경우에 적용됩니다. 그러나 컴포넌트가 중요해질수록 더 많은 로직이 추가되고 컴포넌트는 더 복잡해져 읽고 이해하는 것이 어려워집니다. 많은 개발자가 코드를 수정하는 엔터프라이즈 응용 프로그램의 경우에는 코드를 쉽게 읽고 이해할 수 있어야 합니다.


컴포넌트 옵션이 분리되기 때문에 코드가 세분화되기 시작하면서 로직 문제가 컴포넌트 전체로 확산됩니다. 이러한 옵션 분리는 컴포넌트의 기본 로직을 모호하게 만들 수 있습니다. 또한 개발자는 이를 통해 컴포넌트 작업을 할 때 컴포넌트 전체에 분산된 로직을 이용하여 다양한 파일 작업을 수행할 수 있습니다.


여기에서 Vue Composition API가 등장합니다!

export default {
  components: { ... } // List of components that our component will be using
  props: {
      user: {
          type: String,
          required: true
      }
  },
  setup(props) {
      getUser() { ... },
      getUsers() { ... },
      updateUser() { ... },
      deleteUser() { ... },
​
      return { getUser(), updateUser(), deleteUser() }
  }
}


Composition API를 사용할 때는 컴포넌트의 로직을 포함하는 setup() 메서드를 사용합니다. 이 메서드 내에서는 로직을 원하는 대로 그룹화할 수 있습니다!


예를 들어 사용자 목록을 가져오는 경우:

setup(props) {
  getUsers() { ... },
​
  // Getting list of associated users
  users: []
  getUsers() {
      // retrieves our list of associated users
  }
​
  updateUser() { ... },
  deleteUser() { ... },
​
  return { users, getUsers() }
}


보다시피 data() 컴포넌트 옵션에서 users 변수를 선언하는 대신 getUsers 메서드 직전에 선언하여 데이터베이스에서 사용자를 검색하기 위한 로직을 그룹화합니다.



Composition API를 사용하여 FlexGrid 구현


Composition API와 setup() 메서드를 사용하기 위한 기본 원리를 알아보았으므로, 이제는 Composition API로 Wijmo의 Vue DataGrid를 구현하는 방법을 살펴보겠습니다.


첫 번째로 할 일은 Wijmo를 설치하고 Vue 파일로 가져오는 것입니다.


Wijmo를 설치하려면 npm install @grapecity/wijmo.all을 실행하기만 하면 됩니다.

그러면 응용 프로그램이 NPM에 연결하여 Wijmo의 모듈을 설치합니다.


다음에는 사용하려는 모듈과 두 가지 Wijmo 스타일을 모두 가져와야 합니다.

여기에서는 스크립트 태그 상단에서 수행하겠습니다.

<script>
import '@grapecity/wijmo.styles/wijmo.css';
import { WjFlexGrid, WjFlexGridColumn } from '@grapecity/wijmo.vue2.grid';
import { CollectionView } from '@grapecity/wijmo';
export default {
  components: {
      WjFlexGrid,
        WjFlexGridColumn
  },
  name: 'DataGrid',
  setup() { ... }
}
</script>


이 샘플의 경우 FlexGrid 컨트롤을 만드는 데 사용할 WjFlexGrid 및 WjFlexGridColumn 모듈과 Vue Datagrid용 데이터 소스로 사용할 CollectionView를 사용하는 것으로 시작합니다.


이제 FlexGrid에 적용할 데이터를 생성하고 이 데이터를 CollectionView에 저장하겠습니다.

setup() {
  // Creating the data used in FlexGrid
    let countriesList = "US,Germany,UK,Japan,Italy,Greece".split(",");
    let data = new CollectionView(getData(countriesList), {})
  function getData(listOfCountries) {
      let data = [];
      for(let i = 0; i < 100; i++) {
          data.push({
              id: i,
              country: listOfCountries[i % listOfCountries.length],
              sales: Math.random() * 10000,
              expenses: Math.random() * 5000
          });
      }
      return data;
  }
  return { data }
}


또한 화면에 렌더링할 때 더 보기 좋도록 만들기 위해 그리드에 스타일을 추가하겠습니다.

<style>
.wj-flexgrid {
  width: 800px;
  height: 500px;
}
</style>


마지막으로 FlexGrid 컨트롤을 렌더링할 HTML을 추가하겠습니다.

<template>
  <div>
      <wj-flex-grid :itemsSource="data">
          <wj-flex-grid-column :header="'Country'" :binding="'country'" width="2*" />
            <wj-flex-grid-column :header="'Sales'" :binding="'sales'" width="*" format="n2" />
            <wj-flex-grid-column :header="'Expenses'" :binding="'expenses'" width="*" format="n2" />
      </wj-flex-grid>
  </div>
</template>


이제 응용 프로그램을 실행하면 FlexGrid는 그렇게 렌더링될 것입니다.

flexgrid


FlexGrid를 구현했으므로 이제는 Vue DataGrid의 기능 몇 가지를 구현하여 컨트롤과의 사용자 상호 작용을 개선하는 방법에 대해 알아보겠습니다.


Vue DataGrid의 기능


많은 양의 데이터를 FlexGrid에 표시하고 있으므로 우리가 첫 번째로 할 일은 페이징입니다. 이 작업을 위해 CollectionViewNavigator를 가져오고 CollectionView의 페이지 크기를 설정할 것입니다.

<wj-collection-view-navigator headerFormat="Page {currentPage:n0} of {pageCount:n0}" :byPage="true" :cv="data" />
....
import { WjCollectionViewNavigator } from '@grapecity/wijmo.vue2.input';
....
let data = new CollectionView(getData(), {
  pageSize: 10
})


CollectionViewNavigator는 헤더 형식을 사용하므로, 사용자가 보고 있는 현재 페이지 번호와 FlexGrid 컨트롤이 사용하고 있는 것과 동일한 데이터 소스를 표시할 수 있습니다.


또한 CollectionView의 pageSize 속성에 값을 할당하여 Vue DataGrid가 페이지당 10개의 값을 표시하도록 할 수도 있습니다.


응용 프로그램을 실행하면 FlexGrid는 그렇게 보이게 됩니다.

페이징


마지막으로 살펴볼 두 가지 기능은 DataMaps 및 Aggregation입니다. FlexGrid에서 데이터 맵을 통합하는 것은 매우 간단합니다.


데이터 맵 드롭다운에 사용할 항목 목록이 필요합니다.


이 목록이 할당되는 열의 dataMap 속성에 해당 목록을 할당해야 합니다. 다행스러운 점은, 데이터를 생성하는 데 사용한 국가 목록을 이미 갖고 있으므로 setup() 메서드의 return 문에 이 목록을 추가하고 국가 열의 dataMap 속성에 할당할 수 있다는 것입니다.

<wj-flex-grid-column :header="'Country'" :binding="'country'" width="2*" :dataMap="countriesList" />
....
setup() {
  let countriesList = "US,Germany,UK,Japan,Italy,Greece".split(",");
  ....
  return { data, countriesList }
}


이제 응용 프로그램을 실행하면 국가 열 내의 데이터 맵에 액세스하게 되므로 사용자는 행의 “국가” 값을 쉽게 변경할 수 있습니다.

데이터 맵


마지막으로 살펴볼 것은 데이터 집계입니다. SalesExpenses 열을 집계하려면 FlexGrid 컨트롤이 초기화될 때 호출되는 FlexGrid의 초기화된 이벤트를 통합해야 합니다.


그리드의 초기화된 이벤트에 연결할 메서드를 만들고 그 메서드 내에서 데이터 집계를 설정하겠습니다. 또한 집계하려는 각 열에서 집계 유형을 설정할 것입니다. 이 사례에서는 SalesExpenses 열 모두에서 집계 유형을 Sum으로 설정하겠습니다.

<wj-flex-grod :itemsSource="data" :initialized="initializedGrid">
  <wj-flex-grid-column :header="'Country'" :binding="'country'" width="2*" :dataMap="countriesList" />
  <wj-flex-grid-column :header="'Sales'" :binding="'sales'" width="*" format="n2" aggregate="Sum" />
  <wj-flex-grid-column :header="'Expenses'" :binding="'expenses'" width="*" format="n2" aggregate="Sum" />
</wj-flex-grid>
....
import * as wjcGrod from '@grapecity/wijmo.grid';
....
setup() {
  ....
  // sets up a row to be used for data aggregation
  function initializedGrid(flex) {
      flex.columnFooters.rows.push(new wjcGrid.GroupRow());
      flex.bottomLeftCells.setCellData(0, 0, 'Σ');
  }
  return { data, countriesList, initializedGrid }
}


응용 프로그램을 실행하면 FlexGrid 하단에 집계된 데이터가 표시됩니다. 페이징을 사용하더라도 집계 후에는 모든 페이지에서 집계된 데이터가 표시됩니다.


이미지


응용 프로그램을 위해 작성한 코드를 완벽하게 분석하려면 다음을 살펴보시기 바랍니다.

<template>
<div>
  <wj-flex-grid :itemsSource="data" :initialized="initializedGrid">
      <wj-flex-grid-column :header="'Country'" :binding="'country'" width="2*" :dataMap="countriesList" />
      <wj-flex-grid-column :header="'Sales'" :binding="'sales'" width="*" format="n2" aggregate="Sum" />
      <wj-flex-grid-column :header="'Expenses'" :binding="'expenses'" width="*" format="n2" aggregate="Sum" />
  </wj-flex-grid><br>
  <wj-collection-view-navigator headerFormat="Page {currentPage:n0} of {pageCount:n0}" :byPage="true" :cv="data" />
</div>
</template>
​
<script>
import '@grapecity/wijmo.styles/wijmo.css';
import { CollectionView } from '@grapecity/wijmo'
import { WjFlexGrid, WjFlexGridColumn } from '@grapecity/wijmo.vue2.grid';
import { WjCollectionViewNavigator } from '@grapecity/wijmo.vue2.input';
import * as wjcGrid from '@grapecity/wijmo.grid';
export default {
components: {
  WjFlexGrid,
  WjFlexGridColumn,
  WjCollectionViewNavigator
},
name: 'DataGrid',
setup() {
  let countriesList = "US,Germany,UK,Japan,Italy,Greece".split(",");
  let data = new CollectionView(getData(countriesList), {
      pageSize: 10
  })
  // create some random data
  function getData(listOfCountries) {
      let data = [];
      for (let i = 0; i < 100; i++) {
          data.push({
              id: i,
              country: listOfCountries[i % listOfCountries.length],
              sales: Math.random() * 10000,
              expenses: Math.random() * 5000
          });
      }
      return data;
  }
  // called when the grid is initialized
  function initializedGrid(flex) {
      flex.columnFooters.rows.push(new wjcGrid.GroupRow());
      flex.bottomLeftCells.setCellData(0, 0, 'Σ');
  }
  return { data, countriesList, initializedGrid }
}
}
</script>
<style>
.wj-flexgrid {
  width: 800px;
}
</style>



맺음말


Composition API를 출시하면서 Vue 팀은 코드 재사용 가능성과 가독성을 개선하여 개발자가 컴포넌트 옵션 설정보다 논리적으로 코드를 구성할 수 있도록 하는 데 목적을 두었습니다.


이러한 변화에 따라 Wijmo의 Vue DataGrid인 FlexGrid를 구현하는 것이 Composition API의 setup() 메서드로 훨씬 간단해졌습니다.






지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

wj.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.