230627 React에서 카카오지도 기본 사용법과 확대 축소 시 뒷배경 문제 해결

230627 React에서 카카오지도 사용하는 방법

 

import { useEffect, useRef } from "react";

const KakaoMap = () => {
  const mapRef = useRef();

  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };
    mapRef.current = new window.kakao.maps.Map(container, options);
  }, []);

  return (
    <>
      <div
        id="map"
        style={{ width: "500px", height: "500px", borderRadius: "10px" }}
      ></div>
    </>
  );
};
export default KakaoMap;

 

확대 축소 시 잔상 문제

확대하거나 축소할 때 회색 뒷배경이 보이지 않고 처음 맵이 계속 보이는 문제

현상

 

확대 축소 시 잔상 원인

맵이 여러 번 렌더링 되어 겹쳐져 있기 때문.

일반적인 경우 create react app을  사용하여 리액트 앱을 만들게 되는데

StrictMode 모드로 인해 map을 불러오는 함수를 두 번 실행하기 때문

 

확대 축소 시 잔상 해결 방법

StrictMode 모드 제거 하기

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

StrictMode 모드 때문이 아닌 경우

StrictMode 모드 때문이 아닌 경우라도 kakao.maps.Map()함수를 여러 곳에서 호출하는지,
리렌더링으로 인해 재호출 되는지 확인하기