React 그리드/테이블 페이지 매김
테이블 형식 테이블 UI는 많은 웹 제품에서 일반적으로 사용됩니다. 처음부터 테이블 형식 테이블 UI를 구축하는 것은 쉽지 않습니다. 그러나 Ignite UI for React, 테이블 UI 생성은 간단하고 대량의 로컬 또는 원격 데이터를 React 그리드에 바인딩하는 것은 쉽습니다. 그리드는 기본적으로 가상화되므로 대규모 데이터 세트를 표시하기 위해 테이블 페이지 매김을 포함할 필요가 없습니다. UI에서 복잡한 데이터를 구성하는 가장 효율적인 방법으로 인해 주로 사용됩니다. 테이블 페이지 매김을 사용하면 데이터를 설정된 수의 행에 표시할 수 있으므로 사용자는 실제로 스크롤 막대 없이도 데이터를 "스크롤"할 수 있습니다. 테이블 페이지 매김을 위한 UI에는 일반적으로 현재 페이지, 전체 페이지, 클릭 가능한 이전 및 다음 화살표/사용자가 페이지를 넘길 수 있는 버튼 등이 포함됩니다.
IsPagerVisible 속성을 설정하여 Ignite UI for React 내에서 행 페이징을 활성화합니다. 또한 pageSize 설정하여 표시되는 최대 행 수를 제한할 수 있습니다.
React Row Paging Example
개요
UX 관점에서 볼 때 테이블 페이지 매김에는 장단점이 있습니다. UX Matters의 최근 기사에 따르면 다음은 테이블 페이지 매김과 관련하여 좋은 점과 나쁜 점을 분석한 것입니다.
테이블 페이지 매김의 이점:
- 사용자 선택을 제한합니다.
- 클릭수는 측정 가능합니다
테이블 페이지 매김 단점:
- 사용자는 여전히 스크롤해야 합니다.
- 호출기는 사이트마다 다르게 작동하고 동작합니다.
- UI 컨트롤이 너무 많으면 혼란스러울 수 있습니다.
- 사용자는 페이징과 느리고 번거로운 작업을 인식합니다.
- 사용자는 페이지 매김 컨트롤을 눈치채지 못할 수 있습니다.
- 페이지 로딩이 느릴 수 있습니다
- 사용자는 작업이 페이지에 적용되는지 아니면 전체 데이터 세트에 적용되는지 혼란스러워합니다.
Ignite UI React 그리드를 사용하면 개발자가 페이징을 추가할 수 있지만 그리드에는 기본적으로 무한 스크롤이 내장되어 있으므로 그리드에 페이저를 추가하는 것보다 무한(또는 가상) 스크롤을 권장합니다. 기본 사용자 경험으로 가상화된 무한 스크롤을 사용하면 다음과 같은 이점을 얻을 수 있습니다.
- 스크롤 상호작용을 통해 얼마나 많은 데이터가 '페이징'되는지 또는 제어할 수 있는 상태에서 최고의 성능을 발휘합니다.
- 모든 콘텐츠를 스크롤하는 자연스러운 접근 방식
- 모든 상호 작용은 최종 사용자에게 명확하게 전달됩니다.
- 모바일 UX의 자연스러운 상호작용에 매핑
React Grid/Page Synchronization
사용자가 정렬 및 그룹화와 같은 그리드와 상호 작용하고 그리드에서 React Pager를 활성화한 경우 다음 기능을 사용하여 React 페이지 매김 데이터가 React 테이블 표시와 동기화되었는지 확인해야 합니다.
- 적용정렬
- 적용그룹
- 적용필터