react infinite scroll 최적화 방법?

Question

리액트 웹 앱에서 인피니트 스크롤을 적용하고 있는데요. 컨텐츠가 적을때는 크게 이슈가 없었는데 많으니까 버벅거리기 시작하더라구요. 코드를 첨부하기가 애매한 상황인데, 제가 적용한 방법을 공유하자면

우선 react-query로 각 페이지 데이터를 캐싱하고 있구요. 인피니트 스크롤 속 아이템들은 key를 id 값으로 지정하고 memo로 감싸놓은 상태입니다.
이렇게 했을때 버벅거림이 어느정도 해소가 되기는 하는데, 여기서 더 최적화 할 수 있는 방법이 있는지 궁금합니다.

혹시 좋은 방법이 있으시면 공유 부탁드립니다. 감사합니다.

손정현 · Accepted Answer

안녕하세요!

버벅거림이 어떤 경우에서 발생하는지 좀 더 설명해주시면 답변하는데 도움이 될 것 같습니다. 우선 리액트 디버그 툴을 써서 프로파일링을 해보시면 좋을 것 같아요.

단순히 DOM에 붙어있는 노드가 너무 많은 것이 문제라면 뷰포트에 보일 때 허용된 크기만큼만 리스트 아이템을 DOM에 더해주고 안보이면 DOM에서 삭제시켜주는 기능을 추가하시면 도움이 될 것 같습니다. windowing이라고 많이 하는 기법이에요.

많이 알려진건 react-window가 있습니다.
- https://github.com/bvaughn/react-window

하지만 react-query를 쓰신다고 하셨으니, react-query를 만든 분이 개발하신 tanstack virtual도 한번 살펴보시는 걸 추천드립니다 :)
- https://tanstack.com/virtual/v3