브라더 헬프
1편에서 내가 https://github.com/zeakd/react-naver-maps 이 라이브러리를 잘 사용을 못해서 그냥 순수 자바스크립트 코드를 쓴다음 나중에 모듈화 하겠다! 라고 했었는데....
아니나 다를까 내 실력이 모자라서 제대로 작동이 안된 것이였다.. 친형의 도움으로 이 라이브러리를 사용하여 맵에 마커를 찍을 수 있게 되었다..! (감동실화..)
새롭게 짠 코드는 아래와 같다
import React, { useState, useRef } from 'react';
import { RenderAfterNavermapsLoaded, NaverMap, Marker } from 'react-naver-maps'; // 패키지 불러오기
function Map() {
const navermaps = window.naver.maps;
const [mark, setMark] = useState({});
const naverMapRef = useRef();
const onClick = (e) => {
const { _lat, _lng } = e.latlng;
setMark({lat: _lat, lng: _lng});
// naverMapRef.current.setCenter(new navermaps.LatLng(_lat, _lng));
}
return (
<RenderAfterNavermapsLoaded
ncpClientId={'youtClientId'} // 자신의 네이버 계정에서 발급받은 Client ID
error={<p>Maps Load Error</p>}
loading={<p>Maps Loading...</p>}
>
<NaverMap
mapDivId={'maps-getting-started-uncontrolled'} // default: react-naver-map
style={{
width: '100%', // 네이버지도 가로 길이
height: '70vh', // 네이버지도 세로 길이
}}
defaultCenter={{ lat: 37.300208, lng: 126.838399 }} // 지도 초기 위치
defaultZoom={18} // 지도 초기 확대 배율
zoomControl={true}
// onClick = {addMarker}
onClick={onClick}
naverRef={naverMapRef}
draggable = {true}
>
<Marker
position={new navermaps.LatLng(mark.lat, mark.lng)}
animation={navermaps.Animation.BOUNCE}
/>
</NaverMap>
</RenderAfterNavermapsLoaded>
);
}
export default Map;이 코드와 기능구현에 실패한 코드의 가장 큰 차이점은 marker를 초기에 생성 하느냐 안하느냐이다.
이전코드에서는 클릭할 때마다 marker객체를 새로 생성하여 맵에 표시하려 했던 반면 이 코드는 초기에 Marker 컴포넌트를 불러내서 마커를 만들고 좌표를 state 변수(mark) 로 두고 클릭할 때 setState로 mark 변수를 변경하여 좌표 위치를 갱신해주었다
아직 react에 익숙하지 않다보니 이렇게 간단해보이는 작업도 많이 헤매인 것 같다. 근데 익숙해지면 정말 편할 것 같다. setState를 잘쓰면 아주 쉽고 빠르게 다양한 기능구현을 할 수 있을 것 같아서..!
부트스트랩 적용
프로젝트의 디자인을 가다듬기 위하여 그나마 익숙한 부트스트랩을 사용하기로 하였다.
https://react-bootstrap.github.io/getting-started/introduction
리액트용 부트스트랩이 있어서 install하고
npm install react-bootstrap bootstrapindex.js에
import 'bootstrap/dist/css/bootstrap.min.css';import 해주었다. 결과는.. 잘 동작하는 줄 알았는데
이런 이상한 navbar를 만들어 주었다.. 예제에 있는 그대로 코드를 붙여넣었는데..?
하지만 일단 home link dropdown search 이 부분들은 필요하지 않고 나중에 다시 다른 방법으로 정렬하면 될 것 같아서 Brand 빼고는 다 지워주었다
정리
이전에 구현에 실패했던 지도 클릭시 마커표시 기능을 다시 구현하여 (1화만에ㅋㅋ) 아주 기쁘고, 부트스트랩과 레이아웃을 조금 정리하니 페이지가 훨씬 보기 좋아져서 뿌듯했다.
메인 페이지 외에 2-3가지 더 페이지가 필요해서 다음에는 라우터를 이용하여 페이지 연결을 해볼 것이다.
