[React] react-virtuoso dynamic height 동적 높이 설정하는 방법 (+ mui)

Intro

안녕하세요. 이번 시간에는 react-virtuoso 에서 동적 높이를 설정하는 방법에 대해 알아보겠습니다. 참고로 저는 third-party mui tabler과 결합하여 사용하였습니다. 

 

My case

react-virtuoso mui table 사용법은 아래와 같습니다. height 를 설정해줄 때 다음과 같이 고정값이 들어가게 됩니다. 

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

 

제 케이스의 경우 여러 rows 데이터가 있고, 그 데이터들은 각각 높이가 달라서 height를 동적으로 설정해줘야 했습니다. 어떤 방법을 사용해야 할까요? 

 

How to solve the problem

import React, { useMemo } from 'react';

const DynamicHeightVirtualizedTable  = ({ headers, rows, stickyHeader, realTime }) => {
    const ref = useRef(null);

  // 각 row 의 높이 설정
  const rowHeight = 65;

  const dynamicHeight = useMemo(() => {
    if (!rows || rows.length === 0) return 222; // rows가 없을 때 최소한의 row 높이 설정
    const calculatedHeight = 120 + (rows.length * rowHeight); // 120의 경우 header 높이여서 더해줌, 각각 다르게 설정해주면 됨 

    // 저는 min height를 지정해주고 싶어서 다음의 로직을 활용함
    return Math.min(calculatedHeight, 850);
  }, [rows]);

  {/* ...code omitted for brevity... */}

  return (
    <Paper
      style={{
        height: dynamicHeight,
        width: '100%',
        backgroundColor: 'transparent',
        overflowX: 'auto',
      }}
      ref={ref}
    >
      <TableVirtuoso
        data={rows}
        components={VirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />

    </Paper>
  );
};

 

방법은 다음과 같습니다. 먼저 동적 높이로 사용할 변수(dynamicHeight)를 선언해줍니다. useRef를 활용해서 높이를 계산할 컴포넌트에 ref 를 추가해줍니다. 

 

사용하고 계시는 스타일에 따라 row의 높이가 다를텐데요, 저는 65px이여서 기본 높이를 65로 설정했고, 혹시 rows 데이터가 없거나, length가 0일 때를 데비하여 최소 높이도 따로 설정해주었습니다. 이후 rows.length 만큼 rowHeight를 곱해줍니다. 저는 header의 높이까지 고려하여 120px를 더해주었습니다. 그럼 동적 높이가 rows마다 잘 동작하는데요, 저는 아무리 데이터가 많아도 너무 길어보이는 건 원하지 않아서, 최소한의 높이로 850px을 설정해주었습니다. 

 

해당 방법 활용 시 react-virtuoso 라이브러리에서 동적 높이로도 설정이 가능합니다. 

 

---

https://virtuoso.dev/mui-table-virtual-scroll/