React에서 kakao map api 사용하는 방법에 대한 질문(간단한걸 7시간동안 못하는중..)

지도/로컬 API
1

안녕하세요,
카카오 API코드를 받아서 평범한 index.html로 돌리니 잘 돌아갑니다:

    <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
	<script>
		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		    mapOption = {
		        center: new kakao.maps.LatLng(37.56649, 126.97723), // 지도의 중심좌표
		        level: 4, // 지도의 확대 레벨
		        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
		    }; 

		// 지도를 생성한다 
		var map = new kakao.maps.Map(mapContainer, mapOption); 

	</script>

근데제가 React로 이 코드를 render{return()}에 복붙하니 안됩니다:

export default class Home extends React.Component {
render() {
//const myExtScript = require(‘…/scripts/kakaomap’)
return (
<div style={{ color: purple }}>
<div id=“map” style={{“height” : “1000px”, “width” : “500px”}}>

      <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ee494d4410cf578c0566203d2f487eb9"></script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
            mapOption = {
                center: new kakao.maps.LatLng(37.56649, 126.97723), // 지도의 중심좌표
                level: 4, // 지도의 확대 레벨
                mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
            }; 

        // 지도를 생성한다 
        var map = new kakao.maps.Map(mapContainer, mapOption);

    </div>
  )}
}

componentDidMount(), , <script dangerouslySetInnerHTML, require() 다해도 안되네요…
굉장히 간단한거 같은데, 제가 뭘 빠트린건가요?
감사합니다.

3

아래 react 예제 참고해서 수정해주세요.
https://codesandbox.io/s/gifted-wescoff-77nwu