마커찍기 ver2
지도에 마커를 찍는 기능을 setState를 사용하여 구현했었는데, 알고보니 그전에 썼던 코드에서 아주 조금 바꾸면 제대로 동작이 가능했다.
이전 코드는 아래와 같은데
const addMarker = ()=>{
let marker = new window.naver.maps.Marker({
position: { lat: 37.300208, lng: 126.838399 },
map: window.naver.maps.MAP,
});여기서 new가 문제였다
const addMarker = ()=>{
let marker = window.naver.maps.Marker({
position: { lat: 37.300208, lng: 126.838399 },
map: window.naver.maps.MAP,
});이렇게 new만 지워주면 잘 작동했다. new로 새로운 naver.maps.Marker를 생성하는 것이 올바른 작동방법이 아니였던 것 같다. 다음에도 이런 경우가 있으면 좀 더 이것저것 만져보면서 실험해봐야겠다. 예상치 못하게 해결되는 것도 있어서..
근데 이전에 setState로 구현한 코드가 더 리액트스럽기도 하고 나중에 좌표 변수도 계속 써야해서 이전 코드를 계속 쓰기로 했다.
라우터
리액트는 SPA인데, 리액트 자체적으로 setState를 사용해서 라우팅하게 되면 아래와 같은 단점이 있다고 한다.
- 특정 페이지에 대한 즐겨찾기 등록이 불가합니다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문입니다.
- 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버립니다.
- 새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동합니다.
그래서 이런 문제점을 해결하기 위한 라이브러리 react-router-dom
이 있다.
npm i react-router-dom라이브러리를 설치해주고 내 프로젝트에서 페이지를 렌더링 하는곳에 적용해주면 된다.
//index.js
import { BrowserRouter } from 'react-router-dom';
import { Route } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Route path="/" component={Main} exact />
<Route path="/analysis" component={Analysis} />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);나는 screen 컴포넌트를 여러개 나눠서(Main,Analysis) 페이지를 index.js에 렌더링하는 식으로 사용하였다.
import { Link } from 'react-router-dom';
<Link to="/analysis">
<button>상세보기</button>
</Link>그리고 어떤 screen의 컴포넌트 안에서 다른 페이지로 이동할 때는 Link를 써서 간단히 라우팅을 구현하였다.
장고(django)로 라우팅을 할떄는 url과 view 사이를 막 왔다갔다 하면서 라우터 코드를 쓴 기억이 있는데 리액트에서는 더 쉽게 구현한 것 같다. 아주 마음에 들어
번외
index.js안에 있는 React.StrictMode가 뭔지 궁금해서 찾아봤는데 이런 기능을 제공한다고 한다
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
아주 좋은 녀석이니 계속 쓰도록하자
참조:
https://www.daleseo.com/react-router-basic/
https://ko.reactjs.org/docs/strict-mode.html
