- 가상화는 리스트에서 보이는 항목만 렌더링하여 성능을 최적화한다. 🖥️
- 무한 쿼리는 데이터를 점진적으로 가져와 네트워크 성능을 향상시킨다. 📶
- API가 페이지네이션을 지원하면 가상화와 무한 쿼리를 함께 사용해야 한다. 🔗
tanstack react virtual
과tanstack react query
라이브러리를 설치해야 한다. 📦useVirtualizer
훅을 사용하여 가상화를 초기화하고 스크롤 요소를 설정한다. ⚙️virtualizer.getVirtualItems
를 사용하여 가상화된 항목을 매핑한다. 🗺️useInfiniteQuery
훅을 사용하여 무한 쿼리를 구현한다. 🔄getNextPageParam
옵션을 사용하여 다음 페이지를 결정한다. ➡️- 데이터를 구조 분해하여 무한 데이터 타입에 접근한다. 🧩