개요
React Table은 파워풀한 테이블과 데이터그리드를 구축하기 위한(building powerful tables and datagrid experiences) hooks collection이다. 이 hooks는 lightweight, composable, and ultra-extensible하지만 마크업이나 스타일을 렌더링하지 않습니다 . 이것은 효과적으로 React Table이 "headless" UI 라이브러리라는 것을 의미합니다.
"headless" UI 라이브러리란?
React Table은 headless 유틸리티입니다. 즉, 기본적으로 실제 UI 요소를 렌더링하거나 제공하지 않습니다. 이 라이브러리에서 제공하는 the state and callbacks of the hooks을 활용하여 자신의 테이블 마크업을 렌더링하는 일은 사용자가 담당합니다. 이 기사를 읽고 왜 React Table이 이런 식으로 구축되었는지 이해하십시오 . 원하지 않는 경우 헤드리스 UI가 중요한 이유에 대한 간단한 설명은 다음과 같습니다.
- 우려의 분리(Separation of Concerns) - 라이브러리로서의 React Table은 솔직히 UI를 담당하는 비즈니스가 없습니다. 테이블의 모양, 느낌 및 전반적인 경험은 앱 또는 제품을 훌륭하게 만드는 요소입니다. 이를 방해하는 요소가 적을수록 좋습니다!
- 유지 관리(Maintenance) - 모든 UI 사용 사례를 지원하는 데 필요한 방대한 API 노출 영역을 제거함으로써 React Table은 작고 사용하기 쉬우며 업데이트/유지 관리가 간단하게 유지될 수 있습니다.
- 확장성(Extensibility) - UI는 창의적인 매체이고 모든 개발자가 작업을 다르게 수행하는 라이브러리이기 때문에 라이브러리에 대한 수많은 엣지 케이스를 제공합니다. UI 문제를 지시하지 않음으로써 React Table은 개발자가 고유한 사용 사례를 기반으로 UI를 설계하고 확장할 수 있도록 합니다.
테이블 구성 요소(Table Component)가 아닌 테이블 유틸리티(Table Utility)
매우 스마트한 테이블 유틸리티 역할을 하는 React Table은 테이블이 기존 테마, UI 라이브러리 또는 기존 테이블 마크업에 통합될 수 있는 가능성을 열어줍니다. 이것은 또한 기존 테이블 구성 요소나 테이블 스타일이 없는 경우 React Table이 훌륭한 테이블을 표시하는 데 필요한 테이블 마크업과 스타일을 빌드하는 방법을 배우는 데 도움이 된다는 것을 의미합니다.
설치(Installation)
npm install react-table --saveyarn add react-tableReact Table is compatible with React v16.8+ and works with ReactDOM and React Native.
참고 : React v16.8.0 (2019.2.6 배포)
본인 React 버전 확인 방법
1. Package.json 에서 "dependencies" 에서 "react" 버전 확인
2. 터미널에 아래 코드로 확인
npm view react version
설치가 완료되고 나면 package.json에서 react-table 설치 버전 확인 가능
+ 연습을 위해서 Mock 데이터 생성
Mockaroo.com 활용
필요한 데이터 생성 후에 download 해서 project 폴더에 붙여넣기.
참고 링크
https://react-table.tanstack.com/docs/overview
https://monovm.com/blog/how-to-check-react-version/
댓글