마커 캐싱

지도에서 마커는 상당히 무거운 객체입니다. React 의 컴포넌트와 연결되어 있는 마커객체는 컴포넌트가 생성될때 만들어지고 해제될때 같이 해제됩니다. 이는 상당히 자연스러운것 처럼 보이지만 실제로 마커 객체 자체는 특정 디자인이나 기능을 가지고 있지 않으므로 반드시 해제될 필요는 없습니다.

마커 객체의 생성/해제에는 지도 종류에 따라서 차이가 있지만 꽤 많은 시간이 걸립니다. 보통 마커 객체는 여러 목적으로 지도위에 다수가 뿌려지고, 지도의 중심이 이동되면 다시 위치를 갱신하는 식의 사용을 많이 하는데, 마커 한개만 놓고 보면 작은 시간일지라도 모아놓고 보면 유저의 경험을 방해할 수 있을 정도의 지연을 유발할 가능성이 있습니다.

네이버 지도 같은 경우는 마커 한개를 해제할때 대략 1ms 정도의 시간이 소요됩니다. 만약 지도에 마커가 500개 있는 상태에서 다른 위치로 이동하면 이동할때마다 500ms 의 끊김이 발생 할 수 있습니다.

캐싱 옵션

MintMap 에서는 위와 같은 문제를 해결하기 위해 마커 캐싱 기능을 지원합니다. React 컴포넌트에서 해제되는 마커객체를 실제로 해제 하지 않고 Pool 에 반환했다가 새로운 컴포넌트에서 마커 생성 요청시에 Pool 에서 꺼내쓰는 방식입니다.

초기 마커 Pool 생성 갯수와 함께 적절히 사용하면 많은 양의 마커 생성/해제에도 좀 더 나은 경험을 가져갈 수 있습니다.

다음은 마커 캐싱 관련 MintMap 의 옵션입니다.

<MintMap markerCache={true} markerCachePoolSize={500}>

markerCache

마커 캐시를 사용할지 여부입니다. 이 값을 true 로 주면 지도 생성시에 마커 객체를 Pool 에 미리 생성합니다.

markerCachePoolSize

마커 캐시의 초기 Pool 사이즈입니다. 지정한 크기만큼 Pool 에 미리 생성합니다.

지정하지 않는 경우 초기값은 1000 입니다.

캐싱 참고

초기 Pool 사이즈를 결정할때는 몇가지 사항에 유의해야합니다.

마커 Pool 사이즈 결정

한번에 너무 많은 수의 마커 Pool 을 생성하면 오히려 지도 초기화시에 끊김이 발생할 수 있습니다. 적절한 수를 찾기 위해서는 지도 초기화시의 성능과 지도에 표현될 수 있는 최대 마커 갯수 등을 고려해서 결정해야 합니다.

한가지 주의할 점은, 만약 지도에 표현되는 마커의 갯수가 대략 500여개 정도라면 Pool 사이즈를 500개로 지정하면 될 것 같지만 테스트를 해보면 Pool 에 반환하는 타이밍보다 새로운 마커를 생성하는 타이밍이 더 빠르게 일어나므로 마커 Pool 에는 가져갈 마커 객체가 남아있지 않은 상태입니다.

마커 Pool 에 더 가져갈 객체가 남아있지 않으면 새로운 마커객체를 생성합니다. 이로인해 Pool 사이즈가 점점 커지게 됩니다.

마커 Pool 의 해제

지도가 컴포넌트로 부터 해제되면 Pool 도 해제 됩니다. 이때 한꺼번에 모든 Pool 내의 마커가 해제되면서 지연시간이 발생 할 수 있습니다.

마커 캐싱의 대안

최적의 성능을 위해서는 캔버스 마커가 더 나은 대안이 될 수 있습니다.

마커를 사용하는 이유는 그 마커에 마우스 클릭이나 오버시에 사용자와의 상호작용이 포함되어 있는 경우가 대부분입니다. 만약 이러한 상호작용이 없거나 복잡하지 않은 경우에는 캔버스 마커를 사용하는것이 더 좋습니다.