리액트 함수형 컴포넌트에 카카오맵 API 사용하기

결과

내용

• 알리고자 하는 위치를 카카오맵 API를 통해 지도로 나타내기

코드

//kakao developers 사이트에서 애플리케이션과 도메인 등록 후 키를 받아서 사용
//index.html
//head에 삽입
   <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=958e94cb44389e401dfb9507be374133"
    ></script>

//Contact.js
const { kakao } = window;

const Contact = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(36.051641499339475, 129.371858321261), //지도의 중심좌표.
      level: 3, //지도의 레벨(확대, 축소 정도)
    };
    //지도 생성
    const map = new kakao.maps.Map(container, options);

    //주소에서 마커 사용하기
    const markerPosition = new kakao.maps.LatLng(
      36.051641499339475,
      129.371858321261
    );
    const marker = new kakao.maps.Marker({
      position: markerPosition,
    });
    marker.setMap(map);
  }, []);
  
  return(
         <Map id="map"></Map>
    );
  
  //styled
  const Map = styled.div`
  margin-left: 10%;
  width: 80%;
  height: 80%;
`;