# react-table

5개의 포스트
post-thumbnail

가상화 테크닉으로 React Table 성능 개선하기 (with react-virtuoso)

React Table은 Table을 그리는데 필요한 다양한 API와 무엇보다도 useRowSelect를 활용한 행 단위 데이터 선택 기능을 제공하고 있어 테이블 상에서 이뤄지는 다양한 작업을 커버하기에 유용한 라이브러리이다. 하지만 React Table의 단점은 무겁다는 것이다. 업무에서는 fetch한 데이터를 다양한 방식으로 가공하여 React Table로 렌더하고, 렌더된 DOM 상에서 사용자가 인터렉션할 수 있도록 여러 기능을 제공하는데 하나의 테이블에 워낙 많은 기능이 들어가다 보니 일반 사용자가 느끼기에도 현저하게 성능이 저하되는 문제가 발생하였다. 지금 개발중인 프로덕트는 infinite scrolling 방식으로 동작하는데, 첫번째 로드 시 50개 리스트를 불러오고, concat으로 추가 fetch 요청이 발생할 때마다 50개씩 리스트를 덧붙이면서 로드되는 속도가 리스트의 갯수에 비례하여 현저히 느려졌다. 이런 성능 저하에 기여한 요인 중에 상당한 부분이 React

2023년 5월 22일
·
0개의 댓글
·

[실용적인 데이터 시각화 for FE] - 1. 테이블

본 시리즈는 프론트엔드 엔지니어로서 데이터 시각화에 대한 실용적이고 실무적인 내용을 다룬 글로 개인 경험을 토대로 작성되어 다소 주관적인 내용을 내포하고 있습니다. 테이블 테이블은 데이터 시각화 업무를 맡게 되었을 때 대부분 필수적으로 요구받는 구현 컴포넌트입니다. 관계 분석에 가장 적합하고 차트 컴포넌트 중 구현 난이도가 요구사항에 따라 천차만별이며 가장 어려운 영역에 속하기도 합니다. 구현 방식 > ## style table tag html의 table tag를 사용하는 방법으로서 아래와 같은 형태를 띕니다. //adriel demo //notion price ![](https://velog.velcdn.com/images/restarea/post/fd84a1a1-a9f7-

2023년 4월 3일
·
0개의 댓글
·

[React] react-table + typescript

yarn add react-table 로 react-table 설치 yarn add @types/react-table 로 typescript 버전으로도 설치 src 폴더 내 components란 폴더 생성해준다. 테스트를 위해서 components 폴더 안에 더미데이터 파일을 넣어준다. 더미데이터는 Mockaroo 에서 손쉽게 제작할 수 있다. 나는 json 파일로 만들어서 200개의 데이터를 만들고 다운로드 받았다. src/components/MOCK_DATA.json `compone

2022년 2월 27일
·
1개의 댓글
·
post-thumbnail

[21.10.15. 금] 패키지를 잘 선택하는 방법

첫번째 PR Merge 이번 프로젝트의 첫번째 Pull reaquest가 merge 됐다. ✌️ react-table 이번 프로젝트에서는 표를 많이 사용한다. 단순한 표 뿐만 아니라 sorting, filtering, search 등 표의 부가적인 기능까지 많이 들어갈 예정이다. 그래서 표를 처음부터 다 구현하기보다는 라이브러리를 찾아보았다. >Top 10 React Table Libraries In 2021 이 사이트에서 나열해놓은 Top 3를 주로 비교했다. 먼저 npm trends에서는 react-table의 이용자수가 압도적으로 많은 것을 알 수 있었다. 나는 보통 라이브러리 선정에 있어, 이용자 수를 중요하게 본다. 이용자수가 많은 만큼 정보도 많을 것이고 이슈 사항에 대한 피드백도 많을 것이라고 생각했기 때문이다. ![](https://i

2021년 10월 15일
·
0개의 댓글
·
post-thumbnail

React-table을 이용하여 재사용 가능한 table 구현하기

기업협업 프로그램으로 참여하고 있는 프로젝트에 table 요소가 많이 사용되었다. 최대한 편하게 재사용할 수 있도록 직관적인 코드를 작성하고자 했는데, 테이블에 포함되어야 될 내용이 많다보니thead, td, tr 등이 복잡하게 난무하게 되었다. (물론 내가 실력이 부족해서..지저분하게 구현될 확률이 높다..) 아무튼, 보기 좋은 코드를 작성하고 싶은 마음에 보다 깔끔하게 테이블을 구현할 방법을 찾아보았고 react-table이라는 라이브러리를 사용하여 구현을 많이 하기에 나도 사용해보았다🤗(귀가 얇은 편..) react-table을 사용한 이유 bootstrap을 통해 편하게 테이블을 구현할 수 있었음에도 react-table을 사용한 이유는 크게 두가지가 있었다. bootstrap을 사용하는 경우 스타일링으로 사용하고자 한 styled-components를 포기해야 했다. bootstrap이 Sass기반으로 움직이다 보니,

2021년 10월 12일
·
0개의 댓글
·