[React] 카카오맵 API 커스텀 해보기-1

따로 사이드 프로젝트와 회사 프로젝트를 진행하다보니 생각보다 카카오맵을 많이 사용하게되서

혹시라도 저와 비슷한 고민을 하는분들이 있지 않을까 싶어 작성하게 됬습니다.

 

절대로 100% 정확한 답이 아니지만 그래도 도움이 되면 좋겠네요.

 

1. 그래서 카카오맵 API 를 React에서 어떻게 사용한다고??!! (또다시 반복!)

https://kkt102.tistory.com/69

네... 일단 JavaScript Key도 발급 받아야하고 사용 할 URL도 등록해주고... 기본 작업은 동일합니다.

근데 카카오맵 API 가이드에는 스와이프처럼 다른 프레임워크 기준으로 가이드가 없다보니 

저는 처음에 삽질아닌 삽질을 많이 했었습니다.

나중에 와서 능력자 한분이 카카오맵 API를 React Module로 배포한 적이 있는 걸 찾긴했지만...

 

https://react-kakao-maps-sdk.jaeseokim.dev/

Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs

전 어느정도 작업을 끝낸 후 해당 라이브러리를 찾은지라 사실상 싹 밀고 다시 작업해야하는 상황이어서

해당 라이브러리를 사용해보지는 못했습니다...

 

2. 지도를 React 화면에 출력시켜보기! (리액트에 카카오맵 출력)

const KakaoMap = () => {
  const kakaoMaps = useRef(null);
  const [map, setMap] = useState(null);

  const getKakao = () => {
    const mapContainer = document.getElementById('map');
    if (!map) {
      const mapOptions = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 4,
      };
      const map = new window.kakao.maps.Map(mapContainer, mapOptions);
      setMap(map);
    }
  };
  useEffect(() => {
    getKakao();
  }, []);
  return <div id="map" ref={kakaoMaps} style={{ width: '100vw', height: '100vh' }}></div>;
};

export default KakaoMap;

해당 코드가 실행되면 

 

이런 아무표시도 없는 지도화면이 출력됩니다!

만약 프로젝트를 최초 성생 후 해당 컴포넌트로 이동했을 떄 지도가 중첩되어 뜬다면 

해당 프로젝트의 root 경로에서 index.js 혹은 index.ts 파일에 선언되어있는

Strict 모드를 비활성화 해주세요.

 

해당 파일에서 <React.StrictMode> 와 </React.StrictMode> 를 주석처리해주셔도 됩니다!

 

간단하게 카카오맵 옵션을 설명해드리면 

 

const mapOptions = {

        center: new window.kakao.maps.LatLng(33.450701, 126.570667),

        level: 4,

      };

해당 부분은 카카오맵 최초 로딩 시 지도의 중심 좌표(위도,경도) 와 지도의 비율을 설정하는 부분입니다.

일단은 기본적으로 위도와 경도를 카카오맵 가이드에 나와있는 좌표로 설정해줬으며

 

확대/축소 레벨은 4로 설정했습니다.

레벨은 1 ~ 13 까지 있으며 숫자가 낮을수록 확대된 비율로 지도가 생성됩니다.

 

const map = new window.kakao.maps.Map(mapContainer, mapOptions);

      setMap(map);

그다음 실제 지도를 생성해주는데 이 때 지도가 표시 될 앨리먼트는 'mapContainer'이며 해당 지도의 옵션값은 'mapOptions' 를 사용하게 되며 해당 값은 setMap(map) 을통하여 state 를 업데이트 해주는 방식입니다.

 

그리고 React Component를 업데이트 리랜더링 시켜주는 useEffect를 사용하여 지도를 호출합니다!

 

3. 이번에는 현재위치로 지도를 나오게 하고싶은데? (현재위치 랜딩)

간단하게 지도를 출력했으니 이번에는 임의의 위치가 아닌 내가 현재 접속한 위치를 중심으로 지도를 출력해야겠습니다!

현재 접속한 위치를 알기 위해선 geolocation을 사용해야합니다.

 

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API

Geolocation API - Web API | MDN

geolocation은 위의 문서를 통해 확인하실 수 있습니다!

const KakaoMap = () => {
  const kakaoMaps = useRef(null);
  const [map, setMap] = useState(null);

  const getKakao = () => {
  	if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const mapContainer = document.getElementById('map');
        if (!map) {
          const mapOptions = {
            center: new window.kakao.maps.LatLng(
              position.coords.latitude,
              position.coords.longitude
            ),
            level: 4,
          };
          const map = new window.kakao.maps.Map(mapContainer, mapOptions);
          setMap(map);
        }
      })
    } else {
      console.log('내 위치를 사용할 수 없어요.')
    }
  };
  useEffect(() => {
    getKakao();
  }, []);
  return <div id="map" ref={kakaoMaps} style={{ width: '100vw', height: '100vh' }}></div>;
};

export default KakaoMap;

 

이번에는 해당 컴포넌트로 접속하면 아래와 같은 권한요청관련 Alert가 활성화 됩니다.

당연하게 '허용' 을 눌러줍니다!

그러면 아까와 같은 임의의 위치 지도가 아닌 현재 접속한 위치 중심으로 지도가 출력됩니다.

 

4. 이번에는 내 위치를 지도에 마커로 표시해야겠어! (마커생성)

이제 사용자가 웹페이지를 통해 해당 컴포넌트가 활성화되면 지도가 뜨고 해당 지도의 중심좌표는 현재 위치를 기반으로 지도가 뜨게됩니다. 하지만 지도가 뜨긴 하는데... 뜨는김에 마커로 현재 위치까지 딱 찍어주면 더 좋을 것 같아요.

const KakaoMap = () => {
  const kakaoMaps = useRef(null);
  const [map, setMap] = useState(null);

  const getKakao = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const mapContainer = document.getElementById("map");
        if (!map) {
          const mapOptions = {
            center: new window.kakao.maps.LatLng(
              position.coords.latitude,
              position.coords.longitude
            ),
            level: 4,
          };
          const map = new window.kakao.maps.Map(mapContainer, mapOptions);
          const myPosition = new window.kakao.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          );

          const marker = new window.kakao.maps.Marker({
            map: map,
            position: myPosition,
          });
          setMap(map);
        }
      });
    } else {
      console.log("내 위치를 사용할 수 없어요.");
    }
  };
  useEffect(() => {
    getKakao();
  }, []);
  return (
    <div
      id="map"
      ref={kakaoMaps}
      style={{ width: "100vw", height: "100vh" }}
    ></div>
  );
};

export default KakaoMap;

 

이번엔 마커를 표시해주기 위해 geolocation을 통해 위도와 경도를 알아낸 후 지도를 생성하는 것이 아니라

해당 위도와 경도 값을 받아온 후 마커를 띄울 위치로 지정해줍니다.

        const myPosition = new window.kakao.maps.LatLng(

          position.coords.latitude,

          position.coords.longitude

        );

먼저 현재 위치를 지정하기 위해 myPosition 변수에 위도와 경도를 선언해줍니다.

 

        const marker = new window.kakao.maps.Marker({

          map: map,

          position: myPosition,

        });

그리고 마커를 생성해주는 변수 선언...

 

이제 지도에 현재 접속한 위치에 기본 마커가 표시되고있습니다.

 

5. 기본마커는 안이쁘니까 다른 이미지로 바꾸자 (마커 커스텀)

마커를 띄우면 카카오맵에서 자주 봤던 그 기본마커 이미지가 표시되는 것을 확인할 수 있습니다.

하지만 만약 지도를 사용하면서 해당 페이지나 전체적인 분위기와 마커가 안맞을 경우가 있습니다.

이 때 마커를 다른 이미지로 바꿔줄 수 있습니다.

마커를 다른 이미지로 바꾸는 것은 기존 마커를 추가하는 코드와 크게 다르지 않습니다

const KakaoMap = () => {
  const kakaoMaps = useRef(null);
  const [map, setMap] = useState(null);

  const getKakao = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const mapContainer = document.getElementById("map");
        if (!map) {
          const mapOptions = {
            center: new window.kakao.maps.LatLng(
              position.coords.latitude,
              position.coords.longitude
            ),
            level: 4,
          };
          const map = new window.kakao.maps.Map(mapContainer, mapOptions);
          const myPosition = new window.kakao.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          );

          const myMarker = 'image url',
            myMarkerSize = new window.kakao.maps.Size(20, 20),
            myMarkerOption = { offset: new window.kakao.maps.Point(0, 0) };
          const myMarkerPosition = new window.kakao.maps.MarkerImage(
            myMarker,
            myMarkerSize,
            myMarkerOption
          );
          const marker = new window.kakao.maps.Marker({
            map: map,
            image: myMarkerPosition,
            position: myPosition,
          });
          setMap(map);
        }
      });
    } else {
      console.log("내 위치를 사용할 수 없어요.");
    }
  };
  useEffect(() => {
    getKakao();
  }, []);
  return (
    <div
      id="map"
      ref={kakaoMaps}
      style={{ width: "100vw", height: "100vh" }}
    ></div>
  );
};

export default KakaoMap;

 

위의 코드는 전체코드입니다!

기존 마커가 추가 된 코드에서 마커 이미지에 대한 변수만 추가된 상태입니다!

 

const myMarker = 'image URL',

   myMarkerSize = new window.kakao.maps.Size(20, 20),

   myMarkerOption = { offset: new window.kakao.maps.Point(0, 0) };

 

const myMarkerPosition = new window.kakao.maps.MarkerImage(

   myMarker,

   myMarkerSize,

   myMarkerOption

);

 

const marker = new window.kakao.maps.Marker({

    map: map,

    image: myMarkerPosition,

    position: myPosition,

});

 

일단 myMarker 부분에서 다른 마커로 교체하기위한 이미지 src 를 추가해주고

myMarkerSize 에는 사용할 마커의 크기!

myMarkerOption에는 해당 마커가 좌표에서 위치할 x,y 축!

그리고 myMarkerPosition 의 변수에 선언한 옵션을 넣어줍니다!

마지막으로 Marker 에 image: myMarkerPosition 을 선언해주면 마커이미지가 교체되서 나옵니다!

 

이 때 사용 할  이미지의 src는 위의 샘플처럼 일반 문자열로 선언해주거나

이미지파일을 import 해서 선언해줘도 동일하게 적용됩니다!

 

일단은 제가 까먹지 않기 위해 두서없이 적게 된 글입니다...

따끔한 지적은 언제나 환영합니다! 조만간 도형을 표시하거나 마커에 특정이벤트, 여러개 마커 표시 등도 올려보겠습니다.

 

읽어주셔서 감사합니다!

 

---

❗❗❗2탄 바로가기❗❗❗

2024.05.20 - [Programming/React] - [React] 카카오맵 API 커스텀 해보기-2

[React] 카카오맵 API 커스텀 해보기-2