카카오 지도 이동 시 렌더링 오류 해결

서론

이번 프로젝트 이전에 카카오 지도를 사용할 때는 아주 간단한 작업만 진행하거나, 선임분께서 작업한 코드를 복붙하는 식으로 진행했었다.

그래서 이번 프로젝트에서는 카카오 지도의 기능 중 마커와 클러스터러를 사용해보며 겪었던 오류에 대해 남겨보기로 하였다.

문제1

바로 처음 겪었던 문제는 react-kakao-maps-sdk를 사용할지 말지 정하는 문제였다.
업데이트 주기도 괜찮고 기능도 매우 간편해보이지만 다운로드 수가 은근 적기도 하였고, 나는 카카오 지도의 기능을 다 쓰지 않기 때문에 불필요한 기능을 위해 프로젝트 용량을 늘리기 싫었다.

결론은 react-kakao-maps-sdk를 쓰지 않기로 하였다!

문제2

다음으로 나타난 문제는 카카오 지도를 확대, 축소, 이동 시 처음 지정했던 좌표의 지도가 겹쳐보이는 오류가 나타나기 시작하였다.

바로 서칭을 해보았고, 해결 방법은 총 2가지가 있었다.

1. React의 strict mode 때문에 2번씩 실행되어 겹쳐보인다.
React의 strict mode 때문에 코드가 2번 실행되어 겹쳐보이는 문제가 생겼고, 이 문제에 대한 해결방법은 매우 쉽다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};
export default nextConfig;

strict mode를 false로 해두면 된다.

2. 카카오 지도가 렌더링을 2번 하기 때문에 겹쳐보인다.
이 문제를 겪었던 이유는 웹에서 사용자의 위치가 변경되었을 때 지도의 중앙 위치를 변경하기 위해서 위치 값 변경시 지도를 재렌더링 시키는 방법으로 코드를 작성했다.

하지만 당연하게도 재렌더링을 했기 때문에 이전에 있던 위치의 지도가 겹쳐보이는 현상이 나타나게 되었다.

해결 방법은 공식문서를 찾아보며 알게되었다.

카카오 지도에는 지도의 중심 좌표를 변경하는 메서드가 따로 있기 때문에 setCenter를 사용해주면 된다!

// 기존 코드
useEffect(() => {
  const container = document.getElementById('map');
  const options = {
    center: new window.kakao.maps.LatLng(location.lat, location.lng),
    level: 3,
  };

  new window.kakao.maps.Map(container, options);
}, [location]);

// 변경된 코드
useEffect(() => {
  const container = document.getElementById('map');
  const options = {
    center: new window.kakao.maps.LatLng(location.lat, location.lng),
    level: 3,
  };

  const newMap = new window.kakao.maps.Map(container, options);
  setMap(newMap);
}, []);

useEffect(() => {
  if (map && location) {
    const moveLatLon = new window.kakao.maps.LatLng(location.lat, location.lng);
    map.setCenter(moveLatLon);
  }
}, [location, map]);