찾아보니 react전용 공식문서가 있다!!
하지만 라이브러리를 설치를 해야한다.

react kakao map 공식문서

npm install react-kakao-maps-sdk
yarn add react-kakao-maps-sdk

1. index.html에 아래 코드를 추가해준다.

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>

2. map 페이지

import React from "react";
import { MapMarker, Map } from "react-kakao-maps-sdk";

const KakaoMap = () => {
    return (
        <Map center={{ lat: 33.5563, lng: 126.79581 }} style={{ width: "500px", height: "500px" }}>
            <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>
                <div style={{ color: "#000" }}>Hello World!</div>
            </MapMarker>
        </Map>
    );
};

export default KakaoMap;

---

마커&오버레이 커스텀 하기

• 여러개의 마커를 만들기 위한 더미 데이터

export const markerdata = [
    {
        title: "콜드스퀘어",
        lat: 37.62197524055062,
        lng: 127.16017523675508
    },
    {
        title: "오륙도",
        lat: 35.0938,
        lng: 129.1264
    },
    {
        title: "울산대학교",
        lat: 35.5441,
        lng: 129.2563
    },
    {
        title: "대전 오월드",
        lat: 36.2887,
        lng: 127.3978
    },
    {
        title: "광주공항",
        lat: 35.1399,
        lng: 126.811
    },
    {
        title: "경포대 해변",
        lat: 37.8055,
        lng: 128.9078
    }
];

• mui를 활용하여 overlay 스타일링

import React from "react";
import { MapMarker, Map, CustomOverlayMap } from "react-kakao-maps-sdk";
import { markerdata } from "data/map";
import { styled } from "@mui/material/styles";
import { Box } from "@mui/system";

const Overlay = styled(Box)(() => ({
    padding: "4px",
    backgroundColor: "#ff6a32",
    color: "white",
    fontWeight: "bold",
    "&::before": {
        content: '" "',
        display: "inline-block",
        transform: "rotate(180deg)",
        position: "absolute",
        borderBottom: "10px solid #ff6a32",
        borderLeft: "8px solid transparent",
        borderRight: "8px solid transparent",
        top: "28px",
        left: "25px"
    }
}));

const KakaoMap = () => {
    return (
        <Map center={{ lat: 37.365264512305174, lng: 127.10676860117488 }} style={{ width: "600px", height: "600px" }} level={13}>
            {markerdata.map((position, index) => (
                <>
                    <MapMarker
                        key={position.title}
                        position={{ lat: position.lat, lng: position.lng }}
                        image={{
                            src: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png", // 마커이미지의 주소입니다
                            size: {
                                widht: 24,
                                height: 35
                            } // 마커이미지의 크기입니다
                        }}
                        title={position.title} // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
                    />

                    <CustomOverlayMap position={{ lat: position.lat + 0.45, lng: position.lng + 0.1 }}>
                        <Overlay>{position.title}</Overlay>
                    </CustomOverlayMap>
                </>
            ))}
        </Map>
    );
};

export default KakaoMap;