퍼포먼스 좋은 데이터 그리드 UI - Wijmo

Vue로 프로젝트하다가 대용량 데이터를 보여줄 수 있는 데이터 그리드 니즈가 있었습니다.
처음에는 그냥 v-for로 테이블 만들어서 정렬/필터 같은 기능 붙일까 했는데… 막상 하려니까 귀찮고 😅 유지보수까지 생각하면 답이 안 보이더라고요

무엇보다 대량의 데이터를 한 번에 보여줘야 해서 성능이 가장 최우선이었고요

 

그래서 Wijmo라는 라이브러리가 있길래 같이 써봤습니다.

 

 

Wijmo 설치

Wijmo는 CDN이나 로컬 파일 또는 npm으로 바로 설치할 수 있고 전 Vue에서 이용할려구 Vue 전용 패키지를 설치했습니다.

npm install @mescius/wijmo.vue2.all

 

이후에 App.vue에 FlexGrid 컴포넌트 가져온 뒤 그리드 마크업 및 데이터를 설정해줍니다.

 

<script setup>
import * as wjcCore from "@mescius/wijmo";
import { ref } from "vue";

const data = ref(_getData()); 
const flex = ref(null);
// 데이터 가져오기
function _getData() {
    let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
        data = [];
    for (let i = 0; i < 200; i++) {
        data.push({
            id: i,
            country: countries[i % countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            discount: Math.random() / 4,
            active: i % 4 == 0
        });
    }
    return data;
}

// 그리드 초기화
function flexInitialized(flexgrid) {
    flex.value = flexgrid;
}

</script> 

<style>
.wj-flexgrid {
    height: 400px;
    margin: 6px 0;
}
</style>

<template>
  <div class="container-fluid"> 
  	 <!-- 데이터 그리드 마크업 -->
	<wj-flex-grid :itemsSource="data":initialized="flexInitialized">
		<wj-flex-grid-column :header="'아이디'" :binding="'Id'"  />   
		<wj-flex-grid-column :header="'국가'" :binding="'country'" />        
		<wj-flex-grid-column :header="'판매'" :binding="'sales'" width="*" format="n2" />         
		<wj-flex-grid-column :header="'지출'" :binding="'expenses'" width="*" format="n2" />
		<wj-flex-grid-column :header="'할인'" :binding="'discount'" width="*" format="n2" />
		<wj-flex-grid-column :header="'활성화유무'" :binding="'active'"  />
	</wj-flex-grid>
  </div>
</template>

 

main.js 파일에서 Wijmo CSS 파일 가져오기 및 데이터 그리드에 대한 보조 등록 함수를 설정해줍니다.

import '@mescius/wijmo.styles/wijmo.css';
import { createApp } from "vue";
import App from "./App.vue";
import { registerGrid } from "@mescius/wijmo.vue2.grid";
const app = createApp(App);
registerGrid(app);
app.mount('#app');

 

그럼 끝!

 

근데 디자인이 별로 안 예뼈서 보다가 테마 디자이너라는게 있어서 CSS 복붙하니 볼만하게 설정할 수 있었어요

 

데이터 그리드

 

---

성능은 확실히 좋았다

처음 써본 느낌은 “오 생각보다 가볍네?” 였고 시작하기 문서나 데모가 있어서 러닝커브가 꽤 낮은 부분이 있더라구요. 

수천, 수백만 건 데이터 넣어도 스크롤이 끊기지 않고 부드럽게 움직였고 페이징 또한 지원해서 대량의 데이터를 보여주는데 무리 없이 동작할 거 같았습니다. 

---

아쉬운 점도 있넹..

• Vue 관련 자료는 React보다는 적은 편. (그래도 쓸만한 건 있음)
• API 문서는 영문으로 되어있고 API 예제가 부족(데모가 있긴한데 흠..) 

---

결론 ✨

Vue로 업무용 프로젝트할 때, 특히 대용량 데이터 테이블 필요하다면 Wijmo FlexGrid는 꽤 괜찮은 선택인 거 같습니다.
빠르고 가볍고, 기본 기능은 다 갖춰져 있어서 직접 구현하는 것보다 훨씬 효율적이어서 만족!

👉 요약:

• 빠른 성능 ✔
• Vue랑 호환성 괜찮음 ✔
• 문서 부족은 약간 아쉬움 ❌