React-virtualized의 CellMeasurer

셀의 크기를 화면에서 보이지 않는 방식으로 측정한다음 세팅해주는 HOC이다. width나 height중 하나를 고정시켜야 다른 하나를 잴 수 있다.

 

CellMeasurer는 Grid, List, Table에서 사용할 수 있다.

CellMeasurerCache

CellMeasurer가 측정한 값을 캐싱하는 용도이다. 그 캐싱된 값은 부모인 Grid와도 공유된다.

defaultHeight	number	셀이 처음 렌더링 될때 기본 값
defaultWidth	number	셀이 처음 렌더링 될때 기본 값
fixedHeight	boolean	높이를 고정 시키고 너비를 동적으로
fixedWidth	boolean	너비를 고정 시키고 높이를 동적으로
minHeight	number	계산된 row Height의 최소값
minWidth	number	계산된 column Width의 최소값
keyMapper	KeyMapper	row Index와 column Index를 어떤 아이템과 맵핑시킬건지를 정한다. cell cache가 무효화 되는것을 방지 한다.

CellMeasurer

cache	CellMesurerCache 타입	CellMeasurer와 부모인 Grid사이에 공유되는 캐시값이다. 측정된 셀의 크기가 재계산되는걸 방지한다.
children	Element or Function 타입	1. ReactElement 2. ({ measure, registerChild }) => <div ref={registerChild} />). 와 같은 함수형태의 child여야 한다. child가 이미지라서 load가 끝난 후에  크기를 계산해야 할때 함수형 child를 사용한다. measure를 호출하면 셀의 크기를 계산한다. registerChild는 크기 계산될 DOM에 대한 reference를 지정하기 위해 사용된다.
columnIndex	Number	부모가 Grid인 경우에만 유효하다. List나 Table이 부모인 경우에는 항상 0이다.
parent	Grid	부모 Grid에 대한 Reference이다. cellRenderer에 전달되며 각 셀에서 부모 Grid를 참조하기 위해서 사용된다.
rowIndex	Number	마찬가지로 부모가 Grid인 경우에만 인덱스가 전달된다.

이미지가 로드되었을때 동적으로 셀 크기 측정하기

function rowRenderer ({ index, isScrolling, key, parent, style }) {
  return (
    <CellMeasurer cache={cache} columnIndex={0} rowIndex={index} key={key} parent={parent}>
        {({ measure, registerChild }) => (
              <div ref={registerChild} style={style}>
                <img onLoad={measure} src={source} />
              </div>
        )}
    </CellMeasurer>
  )}

img가 onLoad되었을때 measure함수가 호출되어 셀의 크기가 측정된다. registerChild로 측정해야 하는 DOM을 지정해야한다.

 

style은 List에서 넘어온 값인데 각 셀의 absolute position을 잡기 위해서 각 셀에 적용되어야 하는 스타일들이다. 반드시 넣어줘야 화면에서 잘 렌더링된다.