[react]創業道具の開発#3

タグ印刷ver 2
setStateを使用して地図にマークを付ける機能を実現し、以前書いたコードを少し変更すれば正常に動作します.
以前のコードは以下の通りです

const addMarker = ()=>{
  let marker = new window.naver.maps.Marker({
    position: { lat: 37.300208, lng: 126.838399 },
    map: window.naver.maps.MAP,
});

ここの問題は新しいです.

const addMarker = ()=>{
    let marker = window.naver.maps.Marker({
      position: { lat: 37.300208, lng: 126.838399 },
      map: window.naver.maps.MAP,
});

このままnewを消せば正常に動作します新しいネイバーmaps.タグの生成は正しい起動方法ではないようです.次回もこのような場合があれば、いろいろ触って実験をします.思いがけない解決策も...
しかし,以前はsetStateで実現していたコードの方が反応性があり,以降は座標変数を引き続き使用するため,従来のコードを引き続き使用することにした.
ルーター
反応器はSPAであり,反応器自体がsetStateを用いてルーティングされると,以下のような欠点がある.

特定のページにお気に入りを登録できません.これは、ブラウザアドレスウィンドウのURLが素子間で切り替えられても固定されているためです.

の戻るボタンを押すと、アプリケーションから前のページに移動するのではなく、アプリケーションを別の以前に閲覧したWebサイトに移動します.

リフレッシュボタンを押すと、使用中の構成部品ではなく、最初にレンダリングされたメイン構成部品に無条件に移動できます.

したがって、ライブラリ応答-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素子を複数のindexページ(Main,Analysis)に分けた.jsをレンダリングする方法で使用します.

import { Link } from 'react-router-dom';
<Link to="/analysis">
    <button>상세보기</button>
</Link>

次に,あるscreenコンポーネント内を別のページに移動する際にLinkを用いて簡単なルーティングを実現した.
ドラム(django)でルーティングするときurlとviewの間を往復移動し、ルータコードを記述したのを覚えていますが、反応器では実現しやすいようです.私はとても好きです
番外
index.jsの中のreactStrictModeが何なのか知りたくて探してみましたが、この機能を提供しているそうです.
安全でないライフサイクルを使用している構成部品

が見つかりました.

古い文字列refを使用する警告

findDoMNodeの使用を推奨しない警告

意外副作用検査

従来のコンテキストAPIチェック

彼はいいやつだから、使い続けましょう.
関連項目:
https://www.daleseo.com/react-router-basic/
https://ko.reactjs.org/docs/strict-mode.html