[react] 카카오 지도(kakao map) 띄우기

준비하기

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.

 

 

 

 

 

시작하기

1. 최상위 파일에 api를 불러온다. (index.js)

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY"
    ></script>

 

 

 

2. 모듈로 따로 빼준다. ('kakao' is not undefined 오류가 날 것이다.)

// kakaoMapScript.js

const { kakao } = window;

export default function KakaoMapScript() {
  const container = document.getElementById("map");
  const options = {
    center: new kakao.maps.LatLng(33.450701, 126.570667),
    level: 3,
  };
  return new kakao.maps.Map(container, options);
}

<script>로 api를 가져오면 window 전역 객체에 들어가는데, 함수형 컴포넌트에서는 이를 바로 인식하지 못한다고 한다.

코드 상단에 const { kakao } = window를 작성하여 함수형 컴포넌트에 인지시키고 window에서 kakao 객체를 가져와 사용해야 한다.

 

 

 

 

3. 컴포넌트 안에서 useEffect 내에서 불러오면 지도가 뙇

export const KakaoMap = () => {
  useEffect(() => {
    kakaoMapScript();
  }, []);

  return (
    <>
      <KakaoMapWrap>
        <div id="map"></div>
      </KakaoMapWrap>
    </>
  );
};

const KakaoMapWrap = styled.div`
  #map {
    width: 500px;
    height: 400px;
  }
`;