React map api 질문

카카오맵 API (지도/로컬)
1

카카오 맵 api를 사용하려고 하는데
밑의 코드들을 모두 살펴보고 적용해 봤는데도 아직 kakao를 찾을 수 없다고 합니다. 한번 확인해주세요

class App extends React.Component{

  componentDidMount() {          
    console.log("asdf");
    var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    var options = { //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
      level: 3 //지도의 레벨(확대, 축소 정도)
    };

    var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
  }


  render(){
    return(
      <div>
        <div id="map"></div>
                <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=api key"></script>

      </div>
    )
  }
}
2

지도 호출 스크립트가 제대로 안불러진거 아닌가요?

https://devtalk.kakao.com/t/react-api/43110/2

3

제대로 안불러와진 것 같긴 한데, postman으로 요청을 보내보면 script는 제대로 온다는것은 불러오는 건 된다는 것 같아서, 올렸습니다 ㅠㅜ

4

문의주신 계정에 등록된 앱키를 사용하신 게 맞다면,
해당 앱키로 호출된 이력이 전혀 없어요.

5

네? 그러면 안끌어와진 거 아닌가요?
저 코드 그대로라면 원래 되어야 하는 것 아닌가요?

6

리액트의 경우 클래스 상단에 const { kakao } = window; 를 추가해주시고 사용하셔야 합니다.

7

리액트를 위한 지도 JS API 스크립트 동적 로딩은 아래와 같이 되어야 합니다.

App.js

/*global kakao*/

import React, { Component } from 'react';
import './App.css';

class App extends Component {

    componentDidMount() {
        const script = document.createElement('script');
        script.async = true;
        script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APPKEY&autoload=false";
        document.head.appendChild(script);

        script.onload = () => {
            kakao.maps.load(() => {
                let el = document.getElementById('map');
                let map = new kakao.maps.Map(el, {
                    center: new kakao.maps.Coords(523951.25, 1085073.75)
                });
            });
        };
    }

    render() {
        return (
            <div className="App" id="map"></div>
        );
    }
}

export default App;

App.css

.App {
    width: 100%;
    height: 400px;
}

제가 리액트를 만져본지 좀 되어서
최근 리액트 구조랑 제 코드랑 잘 맞는지 모르겠지만,
스크립트를 동적 로딩하는 부분은 저 순서를 지켜주셔야 합니다.

script.onload 콜백은 kakao namespace와 그 내부에 구현되어 있는 로딩 도구를 사용할 수 있는 시점이며,

kakao.maps.load 콜백은 실제 API의 내용이 담긴 스크립트의 추가 로딩 완료가 끝난 시점에서의 동작을 핸들링 하게 됩니다. 이 시점에서야 실제 API객체에 접근하여 제어가 가능해 집니다.

/*global kakao*/ 해당 주석은 리액트의 lint를 무시하게 합니다.

3개의 좋아요
8

시험해본 결과 맵이 나오지 않습니다.
제 생각에 원래 코드는 src를 따로 했는데, 여기선 같이해서 에러가 난게 아닌가 싶습니다.
index.html에서도 src 와 mapoption을 합치니 맵이 안나왔습니다.