[React] react-virtuoso를 사용한 mui react Table 렌더링 최적화 성능개선 방법

Intro

안녕하세요. 이번 시간에는 react-virtuoso 가 무엇이며, react virtuoso 를 사용하여 react table 렌더링 최적화하는 방법에 대해 알아보도록 하겠습니다.
 

Issue

mui react table을 사용하던 도중 데이터 양이 많아지면서 테이블이 그려지는 속도가 느려져 서비스 이용에 문제가 발생하였습니다.  따라서 react table의 성능을 개선하기 위해 개선 방안을 찾아야 했습니다. 
 
관련 라이브러리를 서치하던 도중 TanStack 와, mui 공식 홈페이지에 Virtualized table 부분에 소개되어 있는 react-virtuoso 두개의 라이브러리를 발견하였습니다. star의 수 자체는 TanStack이 더 높았지만 사용방법이 더 쉽고, 기존 프로젝트에 용이하게 붙일 수 있는 react-virtuoso 를 사용하기로 결정하였습니다. 

 

react-virtuoso

react virtuoso는 react 애플리케이션에서 대용량 list, table, grid 등을 효율적으로 렌더링하기 위한 라이브러리입니다. 주로 가상화 (virtualization) 또는 윈도잉(windowing) 기술을 사용하여 화면에 보이는 항목만 렌더링하여 성능을 최적화합니다. 

 

react-virtuoso example

react virtuoso 예시는 다음과 같습니다. 

import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import { TableVirtuoso, TableComponents } from 'react-virtuoso';

interface Data {
  calories: number;
  carbs: number;
  dessert: string;
  fat: number;
  id: number;
  protein: number;
}

interface ColumnData {
  dataKey: keyof Data;
  label: string;
  numeric?: boolean;
  width: number;
}

type Sample = [string, number, number, number, number];

const sample: readonly Sample[] = [
  ['Frozen yoghurt', 159, 6.0, 24, 4.0],
  ['Ice cream sandwich', 237, 9.0, 37, 4.3],
  ['Eclair', 262, 16.0, 24, 6.0],
  ['Cupcake', 305, 3.7, 67, 4.3],
  ['Gingerbread', 356, 16.0, 49, 3.9],
];

function createData(
  id: number,
  dessert: string,
  calories: number,
  fat: number,
  carbs: number,
  protein: number,
): Data {
  return { id, dessert, calories, fat, carbs, protein };
}

const columns: ColumnData[] = [
  {
    width: 200,
    label: 'Dessert',
    dataKey: 'dessert',
  },
  {
    width: 120,
    label: 'Calories\u00A0(g)',
    dataKey: 'calories',
    numeric: true,
  },
  {
    width: 120,
    label: 'Fat\u00A0(g)',
    dataKey: 'fat',
    numeric: true,
  },
  {
    width: 120,
    label: 'Carbs\u00A0(g)',
    dataKey: 'carbs',
    numeric: true,
  },
  {
    width: 120,
    label: 'Protein\u00A0(g)',
    dataKey: 'protein',
    numeric: true,
  },
];

const rows: Data[] = Array.from({ length: 200 }, (_, index) => {
  const randomSelection = sample[Math.floor(Math.random() * sample.length)];
  return createData(index, ...randomSelection);
});

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableHead {...props} ref={ref} />
  )),
  TableRow,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
};

function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map((column) => (
        <TableCell
          key={column.dataKey}
          variant="head"
          align={column.numeric || false ? 'right' : 'left'}
          style={{ width: column.width }}
          sx={{
            backgroundColor: 'background.paper',
          }}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  );
}

function rowContent(_index: number, row: Data) {
  return (
    <React.Fragment>
      {columns.map((column) => (
        <TableCell
          key={column.dataKey}
          align={column.numeric || false ? 'right' : 'left'}
        >
          {row[column.dataKey]}
        </TableCell>
      ))}
    </React.Fragment>
  );
}

export default function ReactVirtualizedTable() {
  return (
    <Paper style={{ height: 400, width: '100%' }}>
      <TableVirtuoso
        data={rows}
        components={VirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />
    </Paper>
  );
}

 
TableVirtuoso 컴포넌트 상위로 Paper 컴포넌트로 감싼 후, 기본적으로 height를 지정해줘야 합니다. height를 지정하지 않을 경우 화면에 나타나지 않더라고요. 꼭 Paper 컴포넌트가 아니더라도 Box 컴포넌트나 div 태그도 가능합니다. 감싸줄 태그를 지정해주면 됩니다. 
 
이후 data prop에는 rows 데이터를 넣어주고, components props에는 정의된 VirtuosoTablecomponents를 넣어줍니다. 이후 fixedHeaderContent, itemContent props를 활용하여 headers와 rowContent 를 지정해줍니다.
 
기본 사용법은 다음과 같고, 더 디테일한 기능들을 삿용하기 위해서는 공식 홈페이지를 참고하시길 바래요! 
 

---

https://virtuoso.dev/

Getting Started with React Virtuoso | React Virtuoso

 
https://tanstack.com/
https://mui.com/material-ui/react-table/#virtualized-table