카카오 map 확대/축소 시 일시적인 초기 값 렌더링 현상

,

React로 카카오 map 사용하고 있습니다.

확대/축소 시 초기에 생성한 map정보(초기 좌표 값)가 일시적으로 렌더링(깜빡임 현상) 됩니다.

(렌더링 주기와 관련이 있을까요…?)

ezgif.com-video-to-gif-converter (2)

  // 카카오 API 호출
  useEffect(() => {
    const kakaoMapScript = document.createElement('script');
    kakaoMapScript.async = true;
    kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_MAP_KEY}&autoload=false`;
    document.head.appendChild(kakaoMapScript);
    const container = document.getElementById('icheon-map');
    const onLoadKakaoAPI = () => {
      window.kakao.maps.load(() => {
        const options = {
          center: new window.kakao.maps.LatLng(33.33101, 126.457), // 초기 중심 좌표 (위도, 경도)
          level: 5,
        };
        const map = new window.kakao.maps.Map(container, options); // 지도 생성
      });
    };

    kakaoMapScript.addEventListener('load', onLoadKakaoAPI);
  }, []);

고민이네요…useEffect를 사용하지 않으면 kakao 객체를 찾을 수 없어서
load가 된 이후에 kakaoMapScript를 불러오는 로직을 작성하였는데.

이렇게 되면 렌더링 될때마다 초기 좌표 map을 불러오는 상태로 되버린 거 같은데…마땅한 방법이 떠오르지 않네요…
혹은 제가 지금 흐름을 잘 못 이해하고 있을수도 있어서 지적과, 해결방안 공유는 언제나 환영입니다.! :joy:

지도를 확대 축소할 때, 빈 배경(회색)이 보이다가 변경된 레벨의 타일 이미지로 표시가 되는데요.
(해당 동작은 지도 생성하기 예제 또는 카카오맵 PC버전에서 확인 가능합니다.)
함께 첨부주신 이미지를 보면 지도가 중복돼서 하나의 div에 지도가 2번 생성된 걸로 보입니다.
먼저 지도를 생성하는 컴포넌트 또는 훅이 1회 이상 로드됐는지 확인해서 지도를 중복 생성하지 않게 한 다음 다시 확인해주세요.

1개의 좋아요

컴포넌트 1회 이상 생성이 확인되었습니다. 감사합니다 :sweat_smile:

1개의 좋아요