지도 적용 후 줌인/아웃 또는 화면 이동 시 겹쳐보이는 현상

지도/로컬 API
#1

image
image788×695 138 KB

‘use client’;

import { useEffect, useRef } from ‘react’;

declare global {
interface Window {
kakao: any;
}
}

export default function KakaoMap() {
const container = useRef();

useEffect(() => {
console.log(‘tt’);
const script = document.createElement(‘script’);
// 스크립트를 동적으로 로드하기 위해 autoload=false 파라미터 사용
script.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_JAVA_SCRIPT_KEY}&autoload=false;
document.head.appendChild(script);

script.onload = () => {
  window.kakao.maps.load(() => {
    const mapContainer = document.getElementById('container'); // 지도를 표시할 div
    const mapOption = {
      center: new window.kakao.maps.LatLng(37.402054, 127.108209), // 지도의 중심좌표
      level: 3, // 지도의 확대 레벨
    };

    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
    const map = new window.kakao.maps.Map(mapContainer, mapOption);
  });
};

}, [container]);

return (
<>
<div id=“container” style={{ width: ‘500px’, height: ‘400px’ }}>
</>
);
}

위와 같이 적용했습니다.

화면에서 지도를 줌인/줌아웃 또는 클릭 후 이동 시에 첫지도화면이 잠깐보이면서 이동되는데
이게 뭔가 초기화면 위에 이동시 보여지는 화면 이렇게 2개가 겹쳐진듯 보입니다.
혹시 해결방법이 있는지 궁금합니다.

#2

지도가 두 번씩 생성되고 있는 것 같습니다.
지도를 한 번만 생성되게 해 주시고 StrictMode를 사용하고 있다면 해당 모드를 끄고 확인해 주세요.