[React] KakaoMap에 Marker 한 개 띄우기

Kakao.js

import React, { useEffect } from 'react';

const { kakao } = window;

function Kakao() {

    useEffect(() => {
        const container = document.getElementById('map'); // 지도를 표시할 div 
        const options = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };
        const map = new kakao.maps.Map(container, options); // 지도를 생성합니다
        // 마커가 표시될 위치입니다 
        const markerPosition  = new kakao.maps.LatLng(33.450701, 126.570667); 

        // 마커를 생성합니다
        const marker = new kakao.maps.Marker({
            position: markerPosition
        });

        marker.setMap(map);
    }, []);

    return (
        <div id="map" style={{
            width: '100vw',
            height: '100vh'
        }}></div>
    )
}

export default Kakao;

`const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
const marker = new kakao.maps.Marker({
position: markerPosition
});

marker.setMap(map);`

이것만 작성하면 마커가 생긴다!

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다 // marker.setMap(null);