카카오맵 사용 시 중복 렌더링 현상

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

react로 카카오맵 api 사용하고 있습니다.

import { ftruncateSync } from "fs";
import { useEffect } from "react";

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

interface MapProps {
    width: string;
    height: string;
}

function Map({ width, height }: MapProps) { 
  useEffect(() => {
    const container = document.getElementById(`map`); // 지도를 담을 영역의 DOM 레퍼런스
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도 중심 좌표
      level: 3, // 지도의 레벨(확대, 축소 정도)
    };

    const map = new window.kakao.maps.Map(container, options); // 지도 생성 및 객체 리턴
  }, []);

  return <div id="map" style={{ width, height }} />;
};

export default Map;

위 코드로 실행을 하니 처음에 나온 화면이 확대와 축소를 할 때 계속 잔상이 남아 걱정이네요
어떻게 해결해야 할까요

React 이용시 StrictMode를 사용하게 되면 두번씩 실행하게 됩니다. 함수의 무결성을 확인하기 위해서 리엑트에서 자동으로 수행하는 건데요.

index 파일에서 StrictMode를 사용하지 않으면 해결이 됩니다.
이외 다른 방법도 있겠으나 이부분은 직접 찾아보시면 됩니다.

원인은 StrictMode때문에 그러한 것이니 참고 바랍니다.

아니면, 저희가 제공하는 라이브러리는 아니나, 다른 분께서
React 컴포넌트로 랩핑된 라이브러리를 제공중입니다.
https://react-kakao-maps-sdk.jaeseokim.dev

한번 이걸 참고해 보셔도 될것 같습니다.

1개의 좋아요