[react] 카카오 지도 api 구현 안되는 문제 해결

React에서 카카오 지도 api를 사용하려고 하는데 구글링을 해 보고 적용해봤지만 지도가 구현되지 않았다.

알고보니 React에서 네이버나 다음맵을 쓰려면 공식예제에 있는 방법을 사용하면 안되고 약간의 꼼수를 써야한다고 한다.

 

1. 네이버, 다음맵 스크립트 파일을 주입하기 위해 Script Load를 대신해주는 패키지를 설치한다

import Script from "react-load-script";

2. Script Load 라이브러리로 스크립트가 로딩 시킴

<Script 
  url="https://dapi.kakao.com/v2/maps/sdk.js?appkey=<앱키입력>&libraries=services,drawing&autoload=false"
  onLoad={handleScriptLoad}
 />

3. 자바스크립트 파일 로딩이 완료되면 초기화

const container = document.getElementById("myMap");
	const options = {
    	center: new kakao.maps.LatLng(37.62197524055062, 127.16017523675508),
        level: 3
      };

 

이 때, 외부스크립트를 불러왔기 때문에 리액트가 몰라서 오류를 일으킬 수 있으므로 코드 상단에 적어주어 리액트에게 알려줌

/* global kakao */

 

* 총 코드 *

import React, { useEffect } from "react";
import { useState } from "react";
import Script from "react-load-script";

/* global kako */

const AddressDaumMapComponent = () => {
  
  const handleScriptLoad = () => {
    kakao.maps.load(() => {
			
      const container = document.getElementById("myMap");
      const options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
      };
     
    });
  };

  return (
    <>
      <div
        id="myMap"
        style={{
          width: "480px",
          height: "200px"
        }}
      ></div>
      <Script 
        url="https://dapi.kakao.com/v2/maps/sdk.js?appkey=<앱키입력>&libraries=services,drawing&autoload=false"
        onLoad={handleScriptLoad}
      />
    </>
  );
};
export default AddressDaumMapComponent;