react-virtuoso 사용해 무한스크롤 개선

(썸네일용)

현재 자사 뉴스 페이지의 무한스크롤은 받아온 데이터 요소를 하단에 계속 추가하고 있다.

• 문제 상황
  • 계속 스크롤을 내리며 DOM에 요소를 추가하게 될 경우 메모리 부하가 걸릴 수 있다.
    ex) 10000개의 데이터
• 해결 방법
  • 메모리 최적화를 위해 화면에 보여지는 부분만 DOM에 Painting 해준다.
• 어떻게
  • react-window와 react-virtualized, react-virtuoso 등의 라이브러리 이용.
  • 그 중 react-virtuoso 라이브러리 사용하기로 결정.
• 왜
  • 무한스크롤 구현시 IntersectionObserver 불필요 (코드 및 라이브러리 수 감소)
  • 화면에 보이는 부분만 DOM에 렌더링 해줌.
  • react-virtuoso만 유일하게 아이템 높이가 달라도 자동으로 조절해줌
    (react-window, react-virtualized는 별도 추가 라이브러리 필요 auto-resizer)
  • 현재까지 업데이트 및 커뮤니티가 가장 활발함
  • 좋은 문서 정리 Getting Started with React Virtuoso | React Virtuoso
    
  • 설정과 사용이 가장 간편함
• 구현 방법
  • npm or yarn 통해 install
  • 무한스크롤 사용하는 컴포넌트에서 import
  • loadMore 함수 작성으로 기존 InterSectionObserver 대체
  • 아래와 같이 작성 useWindowScroll을 통해 기존 내부 스크롤 대신 외부 스크롤로 대체
    

• 이슈 발생

  • 반응형으로 모바일로 바꾸게 되면 paddingbottom이 사라짐 (라이브러리 버그)

  • 외부에 별도 div를 생성해 paddingBottom 을 별도 부여해서 해결

• 결과물

  • 개선 전
  • 개선 후(용량 문제로 화질이 낮습니다)

• 이슈 발생

무한스크롤 기능 구현 이후 컨텐츠 상세 → 원래 페이지로 돌아올 경우 스크롤이 유지되지 않는 문제가 있었다.

++ 자꾸 스크롤이 최하단에 내려가 푸터로 가있음.

시도 1

window scroll y 크기를 리덕스를 통한 전역으로 관리하여 해당 위치로 다시 이동되도록 한다.

• 실패

react-virtuoso로 기능을 구현할 경우 실제 window 스크롤 값으로 이동이 어려움.

리덕스로 상태를 관리할 경우 새로고침하면 스크롤 값이 초기화됨.

시도 2

window scroll y값 대신 virtuoso로 렌더링된 아이템 인덱스 값을 찾아 해당 위치로 이동하게 한다.

리덕스 대신 세션스토리지에 값을 저장해서 새로고침 하더라도 값이 저장되도록 한다.

세션스토리지에 값이 계속 저장되지 않도록 원래 페이지로 돌아오면 세션에 값을 삭제한다.

• 실패

스크롤 했을 때 해당 위치의 대략 적인 인덱스 값을 저장해버리니 위치가 정확하지 않다.

무한스크롤 데이터가 이미 렌더링이 끝났는데 인덱스 상태 값이 뒤늦게 업데이트 되다 보니 해당 위치로 이동하지 못한다.

시도 3

virtuoso로 렌더링된 아이템 중 클릭한 인덱스 값을 세션스토리지에 저장한다.

isReady 라는 상태를 추가 해 인덱스 데이터를 완전히 불러오기 전까지는 무한스크롤 로딩 상태를 유지하도록 한다.

위치 값이 상태에 저장되고 나면 이후 무한스크롤 렌더링을 한다.

• 실패

해당 인덱스가 가운데로 오도록 해야하는데, 계속 상단에 위치한다. 위치를 center로 줘도 변화 없음.

시도 4

내가 봐야하는 인덱스가 상단에 위치하고 있으니 인덱스 값 - 2 or -3을 주게 된다면 목표했던 인덱스가 가운데로 위치하게 될 것. 값이 음수로 가게 된다면 에러가 나기에 예외처리로 0 이하면 무조건 0 값을 부여했다.

결과

성공!!