
[React] React-Window를 활용해 DOM 성능 최적화 | DOM에 요소 800개가 추가된다고 ..?

·
🩵 React
문제 상황현재 BottomSheet를 활용하여 장소 정보를 표시하는 기능이 있습니다.그러나, 장소 리스트를 제공하는 API가 페이지네이션을 지원하지 않고, 한 번에 모든 데이터를 응답하는 구조입니. 이로 인해 DOM을 확인해보면 모든 장소 리스트가 한 번에 렌더링되는 문제가 발생합니다. 현재 데이터베이스에는 약 800개의 장소 정보가 저장되어 있으며, 최악의 경우 800개의 장소 컴포넌트가 모두 DOM에 추가될 수 있습니다. 이러한 문제는 다음과 같은 성능 저하를 초래할 수 있습니다. 1. 렌더링 성능 문제: DOM 노드가 과도하게 많아져 브라우저의 렌더링 성능이 저하됨. 2. 메모리 사용 증가: 불필요한 컴포넌트가 많아지면서 메모리 사용량이 급격히 증가함. 3. UX 저하: 스크롤이 버벅거리거나, ..