[React] kakaoMap API Maker적용

저번글에 이어 이번에는 마커를 적용해 볼려고 합니다.

import styled from 'styled-components';
import {useEffect} from 'react'
/*global kakao*/
const KakaoMap = () => {
  useEffect(()=>{
    let container = document.getElementById('map');
    let options = {
      center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
      level: 3
    };
    let map = new kakao.maps.Map(container, options);
  }, [])
  return (
      <MapBox id="map"/>
  )
}
const MapBox = styled.div`
  width: 100%;
  height: 100%;
`
export default KakaoMap;

위 코드에

// 마커를 추가할 위도와 경도
let markerPosition  = new kakao.maps.LatLng(37.365264512305174, 127.10676860117488);
    let marker = new kakao.maps.Marker({
      position: markerPosition
    });
    marker.setMap(map);

위 코드를 추가만 해주면 됩니다

import styled from 'styled-components';
import {useEffect} from 'react'
/*global kakao*/
const KakaoMap = () => {
  useEffect(()=>{
    let container = document.getElementById('map');
    let options = {
      center: new kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
      level: 3
    };
    let map = new kakao.maps.Map(container, options);
    // Maker을 추가할 위도와 경도
    let markerPosition  = new kakao.maps.LatLng(37.365264512305174, 127.10676860117488);
    let marker = new kakao.maps.Marker({
      position: markerPosition
    });
    marker.setMap(map);
  }, [])
  return (
      <MapBox id="map"/>
  )
}
const MapBox = styled.div`
  width: 100%;
  height: 100%;
`
export default KakaoMap;

결과