무한스크롤을 구현할때 빼놓을 수 없는것이 가상화 라고 생각합니다.
아이템의 높이가 다르기때문에 해당 과정에서 어려움이 있었습니다.
해당 과정을 매끄럽게 만들기위해 TanStack Virtual 라이브러리를 사용했습니다.
일반적인 무한 스크롤은 최신 데이터가 위쪽에 위치하고,
스크롤이 하단에 도달하면 데이터를 불러와 보여주는 방식입니다.
하지만 채팅방 같은 경우는 반대방향입니다.
채팅방의 무한 스크롤 구현에 어려움을 겪은 부분을 적어보겠습니다.
- 채팅방에 입장할 때 스크롤을 맨 아래 부터 시작해야하며,
스크롤이 맨위에 도달하며 데이터를 불러왔을때, 스크롤은 현재아이템에서 유지되어야합니다. - 스크롤이 제일 아래, 즉 최신 데이터를 보고 있을땐 채팅이온다면 스크롤을 맨 아래로 유지시켜주고,
이전 데이터를 보고 있을 때는 스크롤을 유지시켜줘야합니다.
어려움을 겪은 공통된 이유는 스크롤이벤트를 관리하는것에 익숙하지 않고,
구현하는 방법에대한 아이디어가 부족했던것같습니다.
기본적인 무한스크롤 컴포넌트의 형태는 docs와 동일합니다.
스크롤을 가지는 최상위박스의 ref를 parentRef로 동일하게 정의했습니다.
1번의 문제를 해결하기위해 리렌더링시에도 초기화 되지않는 값이 필요해 useRef를 사용했습니다.
채팅방 입장시 scrollHeight가 1000이라고 가정해보겠습니다.
currentScrollHeight는 1000이 될것이고, scrollTop또한 1000이되면 맨밑을 향하게됩니다.
또한 현재scrollHeight를 prevScrollHeight에 넣어줍니다.
스크롤이 제일 상단에 도달해 다음데이터를 불러와 scrollHeight가 2000이 된다고 가정해보겠습니다.
currentScrollHeight는 2000이 될것이고, scrollTop은 1000이 되기때문에
보고있던 아이템에 스크롤이 유지되게됩니다.
스크롤이 최상단에 도달해 다음데이터를 불러오는것에 대해 판단하는 방법에 대한 내용입니다.
스크롤이 어느정도 상단에 도달했다면, 다음 데이터를 불러오고 싶었습니다.
하지만 해당 코드에서는 휠을 내리고있는데도 데이터를 불러오는 현상이 발생했고,
휠의 방향에 대해 조건문을 추가했습니다.
2번의 문제의 해결방안은 socket에서 event가 발생할때,
스크롤이 최하단에 있을때만 스크롤이 최하단으로 향하는 것입니다.
delta라는 변수를 만들고, 해당수식을 통해 delta가 200보다 작다면 최하단으로 판단하여,
스크롤을 최하단으로 내려주게됩니다.
해당문제들을 풀어내기위해,
useState를 사용해 처음 입장시 api요청으로 제공된 데이터를 초기값으로 시작해 socket데이터를 추가하는 방식에서
api요청으로 제공받은 데이터와 socket데이터를 구분지어 관리하는것으로 수정했습니다.
'Infinite Scroll' 카테고리의 다른 글
| 역방향 무한스크롤 스크롤에러 (0) | 2024.04.13 |
|---|