목록지도성능최적화 (1)

작은프론트이야기

React Kakao Map에서 수천 개의 마커를 렌더링할 때 성능 최적화

프론트엔드 프로젝트에서 차량 위치를 표시하는 기능을 구현하던 중, 사업장마다 수천 대의 차량 정보를 Kakao Map에 마커로 표시해야 했다. 초반에는 react-kakao-maps-sdk의 를 그대로 사용했으나, 마커가 많아질수록 다음과 같은 문제가 발생했다.2천 개 이상의 마커를 렌더링할 경우 페이지 전체가 멈추거나 느려지는 현상지도 줌 조작 후 사업장 변경 시 무한 로딩 현상 또는 이미지 요청 지연다른 페이지로 이동 시에도 대기 중이던 마커 이미지 요청이 남아있어 성능 저하원인 분석기존 구현은 다음과 같았다. {carLocationList.map((item) => ( ))} 즉, 마커 하나당 컴포넌트가 생성되며 React가 이를 모두 렌더링하게 했다. 이는 렌더링 성능과 가비지 컬렉션 ..
문제 해결 2025. 5. 9. 14:59
이전 Prev 1 Next 다음