React에서 다음 api활용

[bca1990]

지도/로컬 API에 대한 문의게시판입니다.

React에서 다음 map api를 활용하고자 하는데요.
http://apis.map.daum.net/web/guide/
위 링크에 공개된 map 기본 api를 적용하려면 react에서 어떤식으로 사용해야 할까요?

너무나 간단한것인데 처음이라 어렵네요.

가능하면 자세한 답변 부탁드립니다.

[doji.doo]

가장 쉬운 방법은
script 로딩 이후에
window.daum.maps.XXX 로 접근하여 사용하는 방식이 있습니다.

만약 eslint에 걸려서 컴파일이 실패하는 경우
daum.maps 네임스페이스에 접근하는 js 파일 시작에

/*global daum*/

을 적으면 컴파일이 될 겁니다.
이 외에도 여러 방법이 있을 수 있으니 참고만 해 주세요.

만약 지도 객체들을 React Component로 만들어서 동적으로 무엇인가 하려고 한다면
그와 관련된 컴포넌트들은 직접 만드셔야 합니다.

[bca1990]

좀더 자세한 예시를 들어주실수 있나요?

[bca1990]

render(){
var mapStyle = {
width:'100%',
height:'600px',
overflow:'hidden',
};
var container = document.getElementById('map');
var options = {
center: new window.daum.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new window.daum.maps.Map(container, options);
return(

);
};
와 같이 window를 이용하엿더니 기존의 'daum'을 인식하지 못하는 에러는 해결되었는데요,
Uncaught TypeError: Cannot read property 'currentStyle' of null
이라는 에러가 발생했네요...

원론으로 돌아가, 첫 질문에 대한 자세한 예시좀 부탁드릴게요!
처음 react를 접해보는거라 어렵네요..

[doji.doo]

아마도 render() 함수에서 id="map" 인 엘리먼트를 jsx 문법으로 작성하여 렌더링 하고 있는 것으로 추측되는데요,
render() 함수 내부에서 생성(return)도 되지 않은 엘리먼트를 접근하려고 하기 때문에
document.getElementById("map") 은 null 값을 리턴할 것이고 container 변수에는 null이 할당되어 지도를 제대로 생성하지 못하고 있는 것이죠.

흐음... 만약 단순한 지도 뷰잉이 필요하다면
저는 아래와 같이 쓸 겁니다.

/*global daum*/

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

class App extends Component {
    componentDidMount() {                                                    
      let el = document.getElementById('map');
      let map = new daum.maps.Map(el, {
        center: new daum.maps.LatLng(/* latitude */, /* longitude */)
      });
    }
                                                    
    render() {
      return (
        <div className="App" id="map"></div>
      );
    }
}

export default App;

리액트에서는 component, 그러니까 현재 클래스의 render가 실행되고 난 이후에 수행되는 이벤트 함수로 componentDidMount 를 제공하고 있는데
이 부분에 지도 코드를 구현하는 것이죠.

[doji.doo]

아참! 그리고 더 자세한 코드는 제공해 드리지 않습니다.

위는 리액트 + 다음지도 사용자를 위한 레퍼런스용 답변으로 사용하기 위해 작성된 내용이라 의도적으로
상세 코드를 적었지만 원래 이렇게 직접 코드는 적어드리지 않습니다.

개인적으로는 구체적인 코드가 오가는 게 명확하고 깔끔하긴 하지만
질문자/답변자 모두에게 영양가가 없는 일이라고 생각하고 있거든요. ㅎㅎ

[bca1990]

감사합니다 충분한 답변이 되었습니다.
두더지님 오늘도 좋은하루 되세요. 감사합니다.

[moondingie2]

두더지님! 저도 헤매고 있던 부분인데 명확히 설명해주셔서 정말 감사드립니다!
새해에도 좋은 일만 가득하세요!!

[spawnnim]

안녕하세요 리액트 공부 중 여쭤보고 싶은게 있어 질문 드립니다.
현재 올려주신 코드에서 map 변수에 정보만 담기고 출력은 안되고 있는 상태이지 않나요?

map에 담긴 정보를 지도로 출력하려면 어찌 해야할까요?

초보자여서 죄송합니다 ㅠ

[doji.doo]

만약 저 코드로 지도가 보이지 않는 상황이라면 CSS를 살펴보세요.
#map 으로 할당된 엘리먼트의 width/height가 지정되어 있어야만 보입니다.