프로젝트마다 다시 짜던 지도 코드, OpenLayers를 React 컴포넌트로 감싼 이야기

<OlMap center={[127.0276, 37.4979]} zoom={13}>
  <BaseLayer type="vworld" />
  <AssetLayer assets={cctvList} onSelect={setSelected} />
  {selected && <AssetPopup asset={selected} />}
</OlMap>

import { createContext, useContext, useEffect, useRef, useState, type ReactNode } from "react";
import OlMapClass from "ol/Map";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import "ol/ol.css";
 
const MapContext = createContext<OlMapClass | null>(null);
 
export function useOlMap() {
  const map = useContext(MapContext);
  if (!map) throw new Error("useOlMap은 <OlMap> 안에서만 쓸 수 있습니다.");
  return map;
}
 
type Props = { center: [number, number]; zoom: number; children?: ReactNode };
 
export function OlMap({ center, zoom, children }: Props) {
  const target = useRef<HTMLDivElement>(null);
  const [map, setMap] = useState<OlMapClass | null>(null);
 
  useEffect(() => {
    const instance = new OlMapClass({
      target: target.current!,
      view: new View({ center: fromLonLat(center), zoom }),
      controls: [],
    });
    setMap(instance);
    return () => {
      instance.setTarget(undefined); // DOM에서 떼고
      instance.dispose();            // 내부 리스너와 리소스를 정리한다
    };
    // 지도는 마운트될 때 한 번만 만든다. center/zoom 변경은 아래 effect에서 반영한다.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  useEffect(() => {
    map?.getView().animate({ center: fromLonLat(center), zoom, duration: 300 });
  }, [map, center[0], center[1], zoom]);
 
  return (
    <div ref={target} className="relative size-full">
      {map && <MapContext.Provider value={map}>{children}</MapContext.Provider>}
    </div>
  );
}

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import { fromLonLat } from "ol/proj";
import { Style, Icon } from "ol/style";
import { unByKey } from "ol/Observable";
 
type Asset = { id: string; lon: number; lat: number; status: "ok" | "warn" | "error" };
 
const ICON: Record<Asset["status"], Style> = {
  ok: new Style({ image: new Icon({ src: "/markers/ok.svg", anchor: [0.5, 1] }) }),
  warn: new Style({ image: new Icon({ src: "/markers/warn.svg", anchor: [0.5, 1] }) }),
  error: new Style({ image: new Icon({ src: "/markers/error.svg", anchor: [0.5, 1] }) }),
};
 
export function AssetLayer({ assets, onSelect }: { assets: Asset[]; onSelect: (a: Asset) => void }) {
  const map = useOlMap();
  const [source] = useState(() => new VectorSource());
  const [layer] = useState(() => new VectorLayer({ source, style: (f) => ICON[f.get("status") as Asset["status"]] }));
 
  // 레이어 수명 = 컴포넌트 수명
  useEffect(() => {
    map.addLayer(layer);
    return () => { map.removeLayer(layer); };
  }, [map, layer]);
 
  // 데이터가 바뀌면 피처만 바꾼다(레이어는 그대로)
  useEffect(() => {
    source.clear(true);
    source.addFeatures(
      assets.map((a) => {
        const f = new Feature({ geometry: new Point(fromLonLat([a.lon, a.lat])) });
        f.setId(a.id);
        f.setProperties({ status: a.status, asset: a });
        return f;
      }),
    );
  }, [source, assets]);
 
  // 클릭하면 선택. 항상 최신 onSelect를 쓰도록 ref에 담아 둔다.
  const onSelectRef = useRef(onSelect);
  onSelectRef.current = onSelect;
  useEffect(() => {
    const key = map.on("singleclick", (e) => {
      map.forEachFeatureAtPixel(e.pixel, (f) => {
        onSelectRef.current(f.get("asset"));
        return true; // 첫 번째 피처에서 멈춘다
      }, { layerFilter: (l) => l === layer });
    });
    return () => unByKey(key);
  }, [map, layer]);
 
  return null; // 그리는 건 OpenLayers가 한다
}

import Cluster from "ol/source/Cluster";
 
const clustered = new Cluster({ source, distance: 40, minDistance: 20 });