virtuoso (1) 썸네일형 리스트형 [React] 무한스크롤 구현 및 최적화(react-intersection-observer => virtuoso) 기존에 react-intersection-obsever를 사용해 무한스크롤을 구현하였던 코드를 virtuoso를 사용하여 리팩토링 하기로 했다.리팩토링을 하게 된 가장 큰 이유는 성능 최적화에 있다.Virtuoso란? Virtuoso는 무한 스크롤 구현 및 성능 최적화를 위한 라이브러리이다. 특징Virtual List(리스트 가상화)Virtuoso는 데이터를 렌더링 함에 있어서 화면에 보여지는 데이터 리스트들만 DOM 요소에 추가한다. 즉, 스크롤을 통해 데이터를 가져올 때 보이지 않는 요소는 DOM에 추가되지 않기 때문에 메모리 사용을 최적화 할 수 있다.Auto Resizing(자동 리사이징)Virtuoso 구성 요소는 콘텐츠 크기 조정, 이미지 로딩 등으로 인해 항목의 높이가 변경될 경우 이를 자동.. 이전 1 다음
