[React] 창업 아이템 개발#2

브라더 헬프

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 컴포넌트를 불러내서 마커를 만들고 좌표를 state 변수(mark) 로 두고 클릭할 때 setState로 mark 변수를 변경하여 좌표 위치를 갱신해주었다

아직 react에 익숙하지 않다보니 이렇게 간단해보이는 작업도 많이 헤매인 것 같다. 근데 익숙해지면 정말 편할 것 같다. setState를 잘쓰면 아주 쉽고 빠르게 다양한 기능구현을 할 수 있을 것 같아서..!

부트스트랩 적용

프로젝트의 디자인을 가다듬기 위하여 그나마 익숙한 부트스트랩을 사용하기로 하였다.

https://react-bootstrap.github.io/getting-started/introduction

리액트용 부트스트랩이 있어서 install하고

npm install react-bootstrap bootstrap

index.js에

import 'bootstrap/dist/css/bootstrap.min.css';

import 해주었다. 결과는.. 잘 동작하는 줄 알았는데

이런 이상한 navbar를 만들어 주었다.. 예제에 있는 그대로 코드를 붙여넣었는데..?

하지만 일단 home link dropdown search 이 부분들은 필요하지 않고 나중에 다시 다른 방법으로 정렬하면 될 것 같아서 Brand 빼고는 다 지워주었다

정리

이전에 구현에 실패했던 지도 클릭시 마커표시 기능을 다시 구현하여 (1화만에ㅋㅋ) 아주 기쁘고, 부트스트랩과 레이아웃을 조금 정리하니 페이지가 훨씬 보기 좋아져서 뿌듯했다.

메인 페이지 외에 2-3가지 더 페이지가 필요해서 다음에는 라우터를 이용하여 페이지 연결을 해볼 것이다.