역방향 무한스크롤 스크롤에러

위에서 아래로 흘러가는 정방향의 무한스크롤에서와 달리,

역방향의 무한스크롤을 구현할때는 조건에 맞춰 스크롤을 직접적으로 이동시켜줘야한다는 차이가 있었다.

구현중 겪었던 버그를 설명해볼까 합니다.

 

 

에러발생

채팅방에 접속했을때, api요청을 통해 데이터를 제공받을때 스크롤의 움직임을 전포스팅을 통해

설명했습니다.

 

채팅방입장시 스크롤이 제일 하단에 위치해야하지만,
간헐적 작동을 안하거나, 중간에 멈추는 현상이 발생했습니다.

 

 

에러발생의 원인

가상화를 위해 Tanstack Virtual라이브러리의 useVirtualizer를 사용해.

parent박스의 높이는 useVirtualizer의 getTotalSize함수를 통해 지정합니다.

 

 

실행결과를 본다면, 

totalSize가 계속 변화하는것을 볼수있습니다.

dataFromApi의 변경으로 인해 현재 parent박스의 높이를 통해 스크롤 이동을 한 후에도 

parent박스의 높이는 변화하고 있기때문에 에러가 발생하고있었습니다.

 

해당 현상의 발생원인은

docs 일부

가상화된 항목의 총 크기를 픽셀 단위로 반환합니다. 요소가 렌더링될 때 동적으로 측정하도록 선택한 경우 이 측정은 점진적으로 변경됩니다.

 

getTotalSize함수의 반환값이 점진적으로 변경된다는 점 때문이였습니다.

 

 

 

해결과정

getTotalSize함수의 반환값이 변화는것이 끝났을 시점에

parent박스의 크기를통해 스크롤에 관련된 동작을 진행해줘야했습니다.

하지만 실력부족으로인해 해당변화가 끝나는 시점을 지정해주는것이 어려웠습니다.

 

차선책으로 채팅방입장시 시간텀을 주고 해당 시간후에 parent박스의 크기를 측정하게 했습니다.

 

기본값이 true인 isLoading이라는 usestate를 하나만들어,

totalSize가 변경되고 isLoading일때만 스크롤을 제일하단으로 이동시킵니다. 해당과정을 3초동안 진행하도록 했습니다.

해당과정을 보다 매끄럽게 보이기위해 조건부로 코드를 추가했습니다.

 

 

 

초기에 딜레이를 강제로 주는방식은 클라이언트의 입장에서는 불편함을 느낄 수 있다고 생각하기에,

해당 방법이 좋아보이지 않음을 느낍니다.

더 나은 방법을 찾기 위해 실력을 키워야할 것 같습니다.