[정리] Virtual Scroll과 Infinity Scroll

참고: yeoulcoding.tistory.com/171

[React] 가상스크롤 구현 (1)

많은 양의 리스트 데이터를 화면에 그리는 경우, 모든 항목을 그리면 성능상 문제를 초래한다.

즉, 10만개의 데이터를 그리기 위해 10만개의 DOM노드를 그리려고 하면 Call Stack size error가 발생한다는 것이다.

따라서 화면에 직접적으로 보여지는 부분만 그리고, 나머지 부분은 가상으로 그려내는 것이 Virtual Scroll의 목표이다.

 

실제로 화면에서 보여지는 View port는 한계간 있기 때문에, 모든 데이터를 화면에 나타내 줄 필요가 없다.

스크롤을 내리면 div크기만큼의 데이터를 다시 렌더링해주면 된다.

이때 새로운 요소들이 렌더링되는 동안 어색하지 않도록, Node padding이라는 여분의 공간을 둔다.

 

절차적으론 다음과 같다.

 

1) 전체 노드 높이를 계산하여 하나의 div 노드를 만들고(노드 한개의 높이 * 노드갯수)

2) View port가 보여줄 수 있는 최대 노드 갯수와 여분의 Node padding만큼의 노드를 그려내고

3) 스크롤에 따라 View port만큼의 노드들을 불러오면 된다.

 

최종적으로 리턴되는 컴포넌트는 다음과 같다.

ref를 가진 1개의 전체 컨테이너가 있고, 그 안에 virtual Scroll단위의 컨테이너를 배치한다.

 virtual-container에는 설정한 만큼의 데이터만 렌더링해준다.

 

useScroll이라는 customHook을 사용한다

ref를 사용하여, 스크롤 이벤트를 감지하고, scrollTop이 변할때 setScroll로 값을 설정해주는 Hook이다

이를 이용하면 스크롤의 끝단에 닿는 시점을 알 수 있다.

 

실제 virtual scroll은 다음과 같이 작동한다.

scrollTop과 ref정보, 그리고 기준이 될 크기 인덱스들을 설정한다.

scrollTop정보로 사용자에게 보여줄 아이템이 몇번째인가를 계산한다.

scrollTop은 현재까지 렌더링 된 모든 아이템들의 높이의 합이 되기 때문이다.

이때 transform에 offset값을 적용하여 사용자 편의를 고려한 여유 공간을 제공한다.

 

 

이를 이용해 Infinity Scroll을 구현할 수도 있다.

scrollTop정보를 이용하여 사용자 스크롤이 끝에 다다르는 경우를 감지고, 해당 시점에서 api를 콜하면 된다.