kakaoMap 로딩 문제

카카오맵 현재위치로 로드되게만들었다.

하지만 로딩하는데 속도가 10초정도 걸리는 문제가 발생했다.

지하철에서 공식문서를 읽어보면서 오던중 맵의 사이즈를 변경할경우 반드시 relayout()이라는 함수를 써야한다는 글을 보았다.

내가 사이즈를 768px, 400px로 바꿔서 로딩이 느려진게 아닐까 생각이들었다.

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';

const KakaoMap = () => {
  const [map, setMap] = useState(null);
  const [marker, setMarker] = useState(null);
  const [state, setState] = useState({
    center: {
      lat: '',
      lng: '',
    },
    isLoading: true,
    errMsg: null,
  });

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          const currentPos = new window.kakao.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude,
          );

          const container = document.getElementById('map');
          const options = {
            center: currentPos,
            level: 3,
          };

          setMap(new window.kakao.maps.Map(container, options));
        //추가한 코드
          container.style.width = '1200px';
          container.style.height = '800px';

          map.relayout();

          setMarker(new window.kakao.maps.Marker());

          setState(prev => ({
            ...prev,
            isLoading: false,
          }));
        },
        err => {
          setState(prev => ({
            ...prev,
            errMsg: err.message,
            isLoading: false,
          }));
        },
      );
    }
  }, []);

  const getCurrentPosBtn = () => {
    navigator.geolocation.getCurrentPosition(
      getPosSuccess,
      () => alert('위치 정보를 가져오는데 실패했습니다.'),
      {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 27000,
      },
    );
  };

  const getPosSuccess = pos => {
    let currentPos = new window.kakao.maps.LatLng(
      pos.coords.latitude,
      pos.coords.longitude,
    );

    map.panTo(currentPos);

    if (marker) {
      marker.setMap(null);
      marker.setPosition(currentPos);
      marker.setMap(map);
    }
  };

  return (
    <div>
      <MapContainer id="map" />
      <Button onClick={getCurrentPosBtn}>현재 위치</Button>
    </div>
  );
};

export default KakaoMap;

const MapContainer = styled.div`
  /* 내가 입력했던 사이즈
  width: 768px;
  height: 400px; */
`;

const Button = styled.div`
  cursor: pointer;
  background-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin-top: 10px;
`;

로딩 속도는 빨라졌으나 새로고침을 하면 에러가 발생했다.

하지만 코드를 수정하면 다시 잘뜨는것을 확인했다.

위의 에러는 변수 map이 null인 상태에서 realyout()함수를 호출하려고해서 읽어올수가 없는건데

학원에서 카카오맵을 사용했을때도 같은 문제가 발생했었다.

그때는 아는게 옵셔널체이닝밖에 아는게 없어서 해결하지 못했는데 공식문서를 읽다보니 뭔가 알거같은 느낌이 들었다.

우선 new window.kakao.maps.Map(container, options)를 newMap이라는 변수로 선언하고 카카오Docs에나온대로 스타일을 주었다.

  const newMap = new window.kakao.maps.Map(container, options);
          container.style.width = '768px';
          container.style.height = '400px';

이후 원하는 사이즈로 생성된 지도(newMap)을 realyout() 함수를 사용해서 새롭게 그리게 하였다.
그리고 그려진 지도를 useState의 상태관리 함수를 사용하여 map이라는 변수로 할당하니 지도가 4초로 줄어든것을 확인했다.

근데 이 4초도 길다. 

뭔가 로딩중이라는걸 보여주는 창을 만들어야겠다.

 

---

로딩페이지를 만들고 안건데, 모바일은 로딩이 없고 브라우저는 로딩이 4초정도 걸린다.

검색해보니 이건 현재기술로는 어떻게 할 수 없다는 글을 보았다.