fix: MapContextProvider를 라이브러리 외부에서 사용하도록 수정

src/components/Map/index.tsx

@@ -1,10 +1,10 @@
-import React, { createElement as e, useMemo, useRef, useState } from "react";
+import { createElement as e, useContext, useRef } from "react";
 import { entries } from "../../utils";
-import { MapContextProvider } from "../../context/mapContext";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect";
 import { useEventHandlers } from "./useEventHandlers";
 import { isEventHandlerKey } from "./utils";
 import type { EventHandlers, MapProps } from "./type";
+import { mapContext } from "../..";
 
 const INITIAL_LEVEL = 5;
 
@@ -44,9 +44,7 @@ export const Map = ({
   const ref = useRef<HTMLDivElement>(null);
   const initializing = useRef(false);
 
-  const [map, setMap] = useState<naver.maps.Map | null>(null);
-  const [init, setInit] = useState(false);
-
+  const { map, setMap } = useContext(mapContext);
   useIsomorphicLayoutEffect(() => {
     if (!ref.current || initializing.current) return;
     initializing.current = true;
@@ -56,29 +54,17 @@ export const Map = ({
       zoom,
       ...mapOptions,
     });
-
-    const listener = map.addListener("init", () => setInit(true));
-    setMap(map);
-
+    setMap?.(map);
     return () => {
       if (initializing.current) {
         initializing.current = false;
         return;
       }
-      map.removeListener(listener);
       map.destroy();
     };
   }, []);
 
-  const memoizedMap = useMemo(() => map, [map]);
-
   useEventHandlers(map, eventHandlers);
 
-  return e(
-    as,
-    { className, style, ref },
-    <MapContextProvider value={memoizedMap}>
-      {init && map && children}
-    </MapContextProvider>,
-  );
+  return e(as, { className, style, ref }, children);
 };

src/context/mapContext.tsx

@@ -1,19 +1,35 @@
-import React, { createContext, ReactNode, useContext } from "react";
+import React, {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 
-type MapContext = naver.maps.Map | null;
+interface MapContext {
+  map: naver.maps.Map | null;
+  setMap: Dispatch<SetStateAction<naver.maps.Map | null>> | null;
+}
 
-const mapContext = createContext<MapContext>(null);
+export const mapContext = createContext<MapContext>({
+  map: null,
+  setMap: null,
+});
 
 interface MapContextProviderProps {
   children: ReactNode;
-  value: MapContext;
 }
 
-export const MapContextProvider = ({
-  children,
-  value,
-}: MapContextProviderProps) => {
-  return <mapContext.Provider value={value}>{children}</mapContext.Provider>;
+export const MapContextProvider = ({ children }: MapContextProviderProps) => {
+  const [map, setMap] = useState<naver.maps.Map | null>(null);
+
+  return (
+    <mapContext.Provider value={{ map, setMap }}>
+      {children}
+    </mapContext.Provider>
+  );
 };
 
 /**
@@ -22,8 +38,8 @@ export const MapContextProvider = ({
  * Make sure to use this inside of `map context` which provided by `Map` component
  */
 export const useMapContext = () => {
-  const map = useContext(mapContext);
-  if (!map) throw new Error("map is not accessible");
+  const { map, setMap } = useContext(mapContext);
+  if (!setMap && !map) throw Error("MapContextProvider is required");
 
   return map;
 };