agGrid에서 MultiGrid로 바꾸고 무한스크롤 적용하기

SuJin·2024년 12월 23일

Error 해결

목록 보기

8/9

문제상황

agGrid를 제거하기 위해 react-virtualized의 List로 바꾸는 과정을 그동안 진행했었는데,,
상하좌우 스크롤이 필요한 grid에서 List로는 좌우 스크롤이 불가능한 문제가 발생했다.

💻 코드에 적용해본거

우선, List에서 좌우 스크롤이 불가능한 것이니까 개발자도구 Element에서 css를 하나씩 수정해봤다. 수정해보니까 List 라이브러리 속 내용을 수정해야 했다.

그래서 다른 방법 중 하나로 사수가 만들어둔 PinableGrid를 사용해봤다.
PinableGrid는 맨 왼쪽 열이 고정되어 있고, 나머지 열들이 스크롤이 가능한 구조여서 이 원리를 적용하려고 했다. 그랬더니 행 별로 개별 스크롤이 적용되어 버리는 문제가 발생했다...
ref를 사용해서 스크롤 동기화를 하려고 했더니 이 또한 라이브러리 속 내용을 수정해야 했다.
다른 방법을 시도할때마다 라이브러리 속 내용을 수정해야하는 문제에 계속 마주쳤다 😭

🔎 검색해본거

찾아보니 table이 좌우 스크롤을 지원 안하는 것처럼 List도 horizontal 스크롤 지원안하는것 같다.

List가 좌우스크롤을 지원안하는 이유는........
react-virtualized에는 MultiGrid가 있기 때문이다!!!!

🔑 해결방법

https://codesandbox.io/p/sandbox/react-virtualized-multigrid-y9e08?file=%2Fsrc%2FGridtable.js

multiGrid 사용 예시가 위 코드에서 굉장히 잘 나와있다.

대신,
클래스형 컴포넌트로 코드가 작성되어 있고,
내가 가진 데이터는 2차원 배열이 아니라서
내 코드에 적용시키는데 시간이 좀 걸렸다.

(하지만 예시가 있어서 너무 기뻤음)

List에 적용했던 방법을 그대로 적용하면
모든 데이터가 다 겹쳐서 보이는 문제가 발생했다.

원인은 모든 데이터들을 top: 0px, left: 0px 로 style을 계산해버렸다.

그래서? 직접, 계산하는 로직을 코드에 추가해줬다.
분명 List에서는 style이 알아서 계산을 했는데 여기서는 왜 적용이 안된건지 모르겠다.

const cellWidth = columns[columnIndex]?.width || DEFAULT_COLUMN_WIDTH;
const cellHeight = rowIndex === 0 ? HEADER_HEIGHT : ROW_HEIGHT;

// 직접 style 계산
const calculatedTop = rowIndex === 0 ? 0 : HEADER_HEIGHT + (rowIndex - 2) * ROW_HEIGHT;
const calculatedLeft = columns.slice(1, columnIndex).reduce((sum, col) => sum + (col.width || DEFAULT_COLUMN_WIDTH), 0);

rowIndex === 0 조건은 헤더는 따로 디자인을 해야하고,
스크롤시 상단에 고정시켜야하기 때문에 분리 작업이 필요하다.

columns.slice(1, columnIndex)

여기서 1이 아닌 0으로 해버리면 index가 1인 열 앞에 공백 생겨버리는 문제가 발생한다. columns 배열 정의를 고정된 헤더와 같이 정의해서 그런것 같다!

무한스크롤 적용

List에서 사용했던 props 중 하나인 onRowsRendered 함수가 MultiGrid에는 없어서 onSectionRendered 를 사용했고

const handleRowsRendered = ({ columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex }) => {
  const triggerPage = Math.floor((rowStopIndex + 1) / INITIAL_PAGE_LIST_LENGTH) + 1;
  if (triggerPage > page) {
    setPage(triggerPage);
  }
};


<MultiGrid
  	cellRenderer={cellRenderer}
  	fixedColumnCount={1}
  	fixedRowCount={1}
  	height={height}
  	width={width}
  	columnCount={columns.length}
  	columnWidth={columnWidth}
  	rowCount={gridData.length + 1}
  	rowHeight={rowHeight}
  	onSectionRendered={handleRowsRendered}
  	deferredMeasurementCache={cellCache}
  	overscanRowCount={10}
  	scrollToRow={0}
  	scrollToColumn={0}
  	className="debug-multi-grid"
  />