난 즐거워... 개발이...

  • 홈

Frontend/react-window 1

[react-window] 대규모 데이터를 virtualize table 로 랜더링하기

최근 테이블을 구현하는데 있어서, 10만개가 넘는 대규모 데이터로 구현할 일이 생겼다. 기존 코드에선 엘리먼트를 사용해서 내가 알던 방식으로 table을 구현했는데, 브라우저가 렉 걸리고... 멈춰버리는 현상이 발생했다. 아마도 데이터의 양이 많다보니 모든 행과 열을 한 번에 랜더링 하는과정에서 발생하는 문제인 것 같은데, 이를 해결하기 위해서 가상화 테이블 ( virtualized table ) 을 구현하는 방법에 대해서 알아보았다. 먼저 table 엘리먼트와 react-virtualized를 이용한 table의 차이점에 대해서 설명하겠다. 1. 성능 및 가상화 위에서 언급했듯이 table 엘리먼트는 대규모 데이터를 랜더링하는데 적합하지 않다. react-virtualized의 경우 화면에 보이는 아이..

Frontend/react-window 2023.09.27
이전
1
다음
프로필사진

난 즐거워... 개발이...

강아지 발 아니고 개발입니다.

  • 분류 전체보기 (20)
    • 알고리즘 (11)
      • 백준 (9)
      • SW Expert Academy (2)
    • Frontend (9)
      • React (0)
      • Javascript & Typescript (0)
      • CSS & SCSS & SASS (1)
      • Apache Echarts (4)
      • React-slick (2)
      • Recoil (1)
      • react-window (1)

Tag

line chart, react, apache, px2rem, slick-slider, react-slick-slider, react-window, react-slick, useEffect, react-virtualized, TypeScript, Carousel, Chart, echarts, apace echarts, selectorFamily, Apache Echarts, px2em, echart, 대규모 데이터,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 05  
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.