각각의 row에 해당하는 픽셀 높이를 구할 때 사용한다.

만약 지금처럼 동일하게 {50}px을 지정해놓으면, 밑의 사진처럼 height가 50px로 지정되어 버리므로 컨텐츠를 다 나타내지 못할 수 있다. 이 때 사용할 수 있는 방법이 바로 CellMeasurer이다.

useRef를 사용해서 CellMeasurerCache 쓰기

효율을 위해서 셀의 크기를 측정한 뒤에 캐시해서 재사용할 수 있다. CellMeasurerCache는 CellMeasurer가 계산한 동적 컨텐츠(row) 높이를 부모와 공유한다.

밑에서는 defaultHeight이 100이므로 평균적인 셀들의 높이가 100px이라는 것이고 width는 고정된 값을 가져야 한다고 명시해준다.

function InfoTable() {
	const cache = useRef(new CellMeasurerCache({
    fixedWidth: true,
    defaultHeight: 100,
  }))  // 변화해도 리렌더링이 일어나지 않는 값
...
return (
	...
	<List
    width={width}
    height={height}
    rowHeight={cache.current.rowHeight}
    deferredMeasurementCache={cache.current}
    rowCount={searchedData.length}
    rowRenderer={rowRenderer}
  />

rowHeight을 cache ref의 current.rowHeight 값으로 두어서 하드코딩하지 않도록 막고, defferedMeasurementCache 속성을 cache ref의 current 값을 가리키게 한다.

CellMeasurer 사용하기

CellMeasurer 컴포넌트로 rowRenderer가 리턴해주는 요소를 감싸준다.

이 때 속성으로 key, cache, parent, columnIndex, rowIndex를 넣는데, 지금 우리의 경우에는 열 별로 데이터를 나타내지는 않으므로 columnIndex는 0의 값을, rowIndex에는 rowRenderer에서 받은 prop index의 값을 넣으면 된다.

function rowRenderer({ key, index, style, parent }) {
    const value = searchedData[index];

    return (
      <CellMeasurer // 추가!
        key={key}
        cache={cache.current}
        parent={parent}
        columnIndex={0}
        rowIndex={index}
      >
        <tr
          class="hover"
          onClick={() => handleTableClick(value)}
          key={key}
          style={style}
        >
         ...
        </tr>
      </CellMeasurer>
    );
  }