리스트의 렌더링이 오래 걸리는 문제

Domain : 동물병원에 공급하는 우리 회사의 솔루션의 콘텐츠 리스트이다.

실제 동물병원에 나가 테스트를 하다보니, 동물병원에 설치된 컴퓨터들은 상당히 오래되고 사양이 좋지 않아, 렌더링에 시간이 오래 걸린다는 것을 알게 되었다. 이는 문제라고 생각한다.

Problem : 설정 페이지의 로딩이 오래 걸리는 문제 발생

요소 1 : 챗봇 콘텐츠(늘펫 플러스 + 병원 내 콘텐츠)가 점점 많아진다.

요소 2 : 최초 페이지 진입 시, 브라우저가 한 번에 모든 리스트를 그려야 되기 때문에, 버벅이는 현상이 생긴다.

Solution : 최초 페이지 진입 시, 모든 리스트를 그리지 않고, 적절히 필요한 부분만 그리는 방법을 찾아봤다.

리스트를 렌더링(브라우저에 그리는 작업)을 최적화하기 위한 방법으로써, 안드로이드의 ViewHolder, RecyclerView라는 것을 확인했다.

모든 리스트를 불러와서 보여주는 ListView의 방식과 달리 ViewHolder(보고 있는 리스트)에 내용만 바꿔치기 하는 방식이다.

해당 기능과 유사한 React의 라이브러리에는 React-window, React-virtualized가 있었다.

React-window는 비해 가볍고 빠르지만, 정해진 크기의 아이템만 사용할 수 있다.

React-virtualized는 React-window보단 무겁지만, CellMeasure 기능을 사용하여 자동으로 크기를 계산하여 높이를 알맞게 렌더링 할 수 있다.

나의 경우, 늘펫 플러스 - 챗봇 콘텐츠의 내용은 높이가 모두 같을 수 없기 때문에 (타이틀의 길이, 태그의 수에 영향을 받음) React-virtualized를 적용하는 것이 더 좋아보인다.

첫번째 렌더링에 보여질 리스트의 수, 전체 데이터의 길이 등을 설정하고, 스크롤 이벤트를 감지하여 데이터를 알맞게 변경시켜 리스트를 스크롤 하는듯한 효과를 보여준다.

개인적으로 느끼기에 React-virtualized의 코드는 상당히 이질적으로 느껴졌다.

기존의 내가 이해하던 코드 방식과는 조금 다르고, 태그 내에서 라이브러리 변수를 사용하기 때문에 console.log의 힘을 빌리기 어려웠다.

반복할 rowRender를 작성한다. index가 보여줄 list의 길이만큼 올라가는 듯 했으며, 스크롤 이벤트로 리스트를 보여주는 척 하는 것이기 때문에, 이 경우 반복한다는 의미도 약간 틀린 것 같다.

본문에는 AutoSizer를 만들어 CellMeasurer로 계산한 높이를 적용하고 List를 작성한다.

여러가지 변수들이 있지만 하여튼 코드의 형태 때문에 직관성이 떨어진다고 생각한다.

적용 완료. 개발자 도구에서 스로틀링을 걸어서 최~대한 느리게 만들어 봤지만 괜찮은 듯 싶다.

동영상에 보이듯이 div가 리스트 개수만큼 있는게 아니라 스크롤 하면 div 안의 내용이 바뀐다.

문제 해결 ~!

댐벼 코딩새끼야