react-virtualized 리스트 뷰의 item이 사라지는 문제 해결하기

효율성 있는 리스트를 구현하기 위해 react-virtualized를 사용하던 도중,
해당 라이브러릴 통해 구현한 리스트의 아이템이 스크롤 중간에 사라지는 문제가 발생했다.

 

이슈의 원인을 탐색한 결과, react-virtualized를 이용해 구현한 리스트 뷰 상단에 조건부 렌더링을 통해 보여지는 영역이 문제였다.

 

해당 조건부 렌더링을 통해 보여지는 영역의 height를 미리 잡아두면 리스트 뷰가 정상적으로 본인의 위치를 인지하지만,

미리 height를 잡아놓지 않은경우, 해당 조건부를 계산하는동안 해당 영역의 높이는 0일것이고 리스트 뷰는 이때의 위치를 본인의 위치로 인지하게 되어 문제가 발생한것이였다.

 

이를 해결하기 위해 react-virtualized의 WindowScroller 컴포넌트내 updatePosition 메서드를 사용해 아래와 같은 형태로 해결했다 .

  // isRenderValueAble : 외부 상단에서 조건부렌더링을 판단하는 boolean 값.
  const CustomList = ({isRenderValueAble}) => {
      const windowScrollerRef = useRef<WindowScroller>(null);
      
      useEffect(() => {
        windowScrollerRef?.current?.updatePosition();
      }, [isRenderValueAble]);
      
      return (
      	<WindowScroller ref={windowScrollerRef}>
        	{({ height, scrollTop }) => {
            	return (
                	<AutoResizer>
                    	...