카카오 API를 이용한 지도 구현하기🙌🏼

기존의 airbnb사이트는 google map을 사용해서, 나도 google map으로 화면에 구현해보려 했으나, 과금 되지 않고 300불 크레딧을 사용해도 된다는 google이었지만 카드정보를 입력을 해두어야 하는것에 사알짝 겁이나 무료인 카카오맵을 이용하였다!

카카오맵을 자바스크립트에서 사용하는 방법은 카카오사이트에 상세히 나와 있지만 react에서 구현하는 방법과, 적용하는 방법이 많이 나와있지 않아 애를 먹었다 ㅠㅠ
내가 원하는 방법대로 구현해보고 싶었지만 살짝 부족한 점이 있지만 그래도 한 만큼은 정리를 해볼까 한다!

Map으로 구현한 기능🌐

1. 좌표(위도,경도)리스트로 들어오는 데이터에 접근해 지도에 이미지 마커로 표기
2. 숙소 리스트에 hover할 때 마다 다른 이미지 마커 표시
3. 숙소 리스트 hover 할때마다 커스텀 오버레이(숙소사진,이름,평점) 표현하기

1. 카카오 지도 API 사용하기

• 방법은 index.html에 태그로 입력해 두는 방법도 있고, map component에 DOM 객체에 접근해서 지도를 사용 할 때 마다 만들어 주는 방법도 있는데, Airbnb 사이트의 경우 상세페이지에서도 지도를 사용해야 하고 리스트에서도 사용하기 때문에 index.html에 직접 하드코딩 해 놓는 방법을 채택했다.
• index.html의 head 태그 안에 카카오 개발 사이트에서 발급받은 appkey를 입력하고 script 태그안에 아래와 같이 입력한다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>

2. Map.js 컴포넌트 만들기🚩

• 카카오맵은 JavaScript 로만 이루어져서 실제 구현되는 내용은 함수안에 입력하고 render하는 부분은 일정한 값으로 저장해 준다. (해당 Map.js컴포넌트는 class 형으로 작성하였음)
• 이후에 handleMap 함수를 입력하여, componentDidMount와 componentDidUpdate에서 아래 className과 id에 접근해 조정하는 식으로 변경 하였음

  render() {
    return (
      <div className='Map'>
        <div id='myMap' />
      </div>
    );

2. 화면에 지도 표현하기🌲

카카오 공식 페이지 설명

• 먼저 map을 관리할 함수를 handleMap으로 만들어 놓고 componenetdidMount에서 map을 실행하고, componentDidUpdate 에서 실행해준다.

  handleMap = () => {
    const container = document.getElementById('myMap'),
      options = {
        center: new kakao.maps.LatLng(33.50972, 126.52194),
        level: 9,
        scrollwheel: false,
      };
    const map = new kakao.maps.Map(container, options);

수정중