ReactKakaoMapSDK로 마커, 커스텀 오버레이 생성하기

우리 팀이 현재 개발하고 있는 CampUs 서비스는 지도를 통해 캠핑장의 좌표를 확인하고 캠핑장을 조회할 수 있는 서비스이다

위 사진처럼 캠핑장을 검색하면 그 결과에 따른 좌표가 지도에 등록되고 마커를 클릭했을 때 사진과 같아 커스텀 오버레이 라고 부르는 컴포넌트를 렌더링 한다.

이전에 kakaoMap API를 통해 리액트에서 개발을 했을 때 리액트에서 사용하기가 조금 불편하다고 느낀적이 있어서

편리한 라이브러리가 없을까 찾아보다가

react-kakao-maps-sdk 라고하는 리액트에서 카카오맵 API를 사용하기 최적화된 기가막힌 라이브러리를 발견했다....!

사용법은 무척 간단하니 샘플을 보면서 따라하길 바란다.

우리는 이제 마커를 생성하는 방법에 대해 알아보자 !

// CampLocation.jsx
import { Map } from 'react-kakao-maps-sdk';
import EventMarker from '../SearchLocation/EventMarker/EventMarker';

const CampLocation = ({
  campList, // 상위 컴포넌트에서 받은 배열로 이루어진 캠핑장리스트
}) => {
  return (
    <Wrap PropState={PropState}>
      <MapStyle // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: campList[0].mapY,
          lng: campList[0].mapX,
        }}
        level={3} // 지도의 확대 레벨
      >
        // 캠핑장리스트를 map함수로 돌려서 각 캠핑장 데이터를 EventMarker
        컴포넌트로 전달
        {campList.map((camp) => (
          <EventMarker key={camp.id} camp={camp} />
        ))}
      </MapStyle>
    </Wrap>
  );
};

CampLocation 라는 이름의 컴포넌트가 있다.

지도의 중심좌표는 처음 지도가 보여지는 좌표이고 나는 이 중심 좌표를 리스트의 첫번째 캠핑장이 기준이 되게 하였다.

CampList라는 캠핑장의 데이터를 가진 배열을 map 함수로 EventMarker 라는 컴포넌트에게 각 캠핑장 데이터를 전달한다.

EventMarker 컴포넌트는 각 캠핑장의 X, Y 좌표를 가지고 지도에 마커를 꽂아주게 된다 !

우선 여기서 포인트는

import { Map } from 'react-kakao-maps-sdk';

위 처럼 react-kakao-map-sdk를 사용하게 된다면 리액트에서 사용하기 쉽게 컴포넌트 형식으로 import 해서 사용할 수 있기 때문에

기존 카카오맵 API 보다 편리하게 사용이 가능하다 ! 👏👏👏

이제 EventMarker 컴포넌트를 알아보자

//EventMarker.jsx
import React, { useEffect, useState } from 'react';
import { CustomOverlayMap, MapMarker } from 'react-kakao-maps-sdk';
import defaultImg from '../../../Assets/Images/default_image.png';

const EventMarkerContainer = ({ camp }) => {
  const [isVisible, setIsVisible] = useState(false); // true면 커스텀 오버레이 렌더링
  const [position, setPosition] = useState({
    lat: '',
    lng: '',
  });

  // 컴포넌트가 마운트되면 position State에 X,Y 좌표를 넣어준다
  useEffect(() => {
    setPosition({
      lat: camp.mapY,
      lng: camp.mapX,
    });
  }, [camp.mapX, camp.mapY]);

  return (
    <>
      // 지도상에 놓이는 마커
      <MapMarker
        position={position} // 마커를 표시할 위치
        onClick={() => setIsVisible(true)} // 클릭하면 커스텀 오버레이가 렌더링 된다 !
      />
      {isVisible && ( //isVisible이 true이면 렌더링
        <CustomOverlayMap
          position={position} // 커스텀 오버레이가 나타날 위치
          style={{
            width: '300px',
            transform: 'translate(-20px, -100px)',
            backgroundColor: 'white',
            borderRadius: '5px',
            boxShadow: '0px 1px 2px #888',
          }}
        >
          <div className="wrap">
            <div className="info">
              <Title>
                {camp.facltNm}
                <CloseBtn onClick={() => setIsVisible(false)} title="닫기">

        ....
        ....
        ....
        ....

말 그대로 커스텀 오버레이 이기 때문에 스타일은 마음대로 커스텀이 가능하다

useEffect에서 position이라는 state에 각 캠핑장의 X, Y 좌표를 넣어주고 마커와 커스텀 오버레이 컴포넌트에

position 옵션을 부여하면 지도상에서 마커와 커스텀 오버레이를 확인 할 수 있다 !

아래는 현재 개발하고 있는 서비스의 마커와 커스텀 오버레이를 구현한 모습이다

기존의 카카오맵 API를 사용하면서 느꼈던 불편한 점을 라이브러리를 사용 함으로써 편리함을 느끼게 되었다

다음에 언젠가 지도를 이용한 프로젝트를 하게되면 또 쓰지 않을까 ?