import React, { useRef } from 'react';
import { NaverMap, RenderAfterNavermapsLoaded } from 'react-naver-maps';
function Map(){
const mapRef = useRef(null);
return (
<RenderAfterNavermapsLoaded
ncpClientId={'RenderAfterNavermapsLoaded'}
// 네이버 클라우드에서 받은 client id를 적어야 한다.
// 필자는 환경변수 이용
error={<p>Maps Load Error</p>}
loading={<p>Maps Loading...</p>}
>
{/* <NaverMap
mapDivId="map"
defaultCenter={{ lat: 37.49988, lng: 127.03856 }}
defaultZoom={16}
zoomControl={true} // 지도 zoom 허용
/> */}
<NaverMap
mapDivId={"react-naver-map"}
style={{
width: '100%',
height: '100vh'
}}
defaultCenter={{ lat: 37.554722, lng: 126.970833 }}
defaultZoom={10}
/>
</RenderAfterNavermapsLoaded>
);
};
export default Map;
react에 naver맵을 넣으려고 블로그에서 찾은데로 react-naver-maps 설치후 복붙했는데 이게 뭔지 싶어서요.
다른것들이야 라이브러리 사용법이라 모르지만 const mapRef = useRef(null); 에서 useRef가 뭐하는것이고 대충 어떨때 어떻게 쓰이죠?
