TIL-19, React SPA, Router

昨日Reactの概念、文法、適用法などを学びました.
今日はreactを使用してSPAを構築する方法について説明します.

SPA(Single Page Application)

従来のWebサイトはページ全体をロードします.
重複する要素に新しく読み込まれたSPAがありますか.
HTMLドキュメント全体を読み込むのではありません.
更新に必要なデータのみを受信して画面に表示します.
必要な情報のみをロードし、サーバのオーバーロードは発生しません.
ユーザーの動作に迅速に応答します.
より良いUIの利点を提供します.
ただし、ほとんどのコードはJavaScriptファイルにあります.
JavaScriptファイルが重くなります.
ファイルを待つ時間が長いため、最初のページのロード時間が長いです.
また、HTMLファイルには他の材料はありません.
HTMLファイルのデータを解析することによって駆動される
検索エンジンは構築しにくい.
(しかし検索エンジンの発展に伴い、
欠点は補われている.

Router

Routing->異なるアドレスに基づいて異なるビューを表示します.
(ルーティングはルーティングと呼ばれ、パスによって変更されることを示します.)
React Routerを使用するにはnpmにインストールする必要があります.
端末入力npm install react-router-domreact router domを呼び出します.
(npm installの場合はスペルに注意し、ちょっとした不注意で複数のソフトウェアがインストールされる可能性があります)
react router domのインストールが正しいことを確認するには、次の手順に従います.
package.jsonのdependencies部分を見てみましょう.React Routeのキー構成部品
1.ルータとしてのBrowserRouter
2.スイッチとルータの整合経路
3.変更経路としてのリンク
この構成部品を使用するには:import {BrowserRouter, Switch, Route, Link} from "react-route-dom入力が必要です.
まず、<BrowserRouter>アセンブリを使用する場所に配置します.<Switch>要素が配置され、<Route>要素が配置される.
構成部品を読み込みます.<Switch>->複数の<Route>要素を囲み、1つのパスのみが一致します.
Routerだけがレンダリングの役割を果たしています.
使用しない場合は、一致するすべての要素がレンダリングされます.<Route>->パス内のどの構成部品を表示するには、パス(path)アトリビュートを指定します
決まります.<Link>コンポーネントによって指定されたURLパスと一致する場合にのみ動作します.<Route path="주소"></Route>最初のRouteではpathの前にexactを付けます.<Route path="/">Home</Route> <Route path="/mypage">Mypage</Route> <Route path="/about">About</Route>上記のように、最初のRouteのpathアドレスは"/"であり、正確に書かなければ
MypageとAboutのアドレスにも「/」が含まれています.
すべてのpathアドレスはホームのみを指します.
exactと書くと、そのアドレスと完全に一致するアドレスしか得られません.<Link>->パスを接続する構成部品.
HTMLの新しいページ<a>タグとは異なり、
ページ切り替え防止の切り替えがあり、SPAを実現できます.
HTMLでは、<a href="주소">내용</a>でリンクが作成されますが、
Reactでは、<Link to="주소">내용</Link>と書きます.
(住所を指す.)
Router flow
アイコンをリンクにしたいなら?

const App () => {
  return (
    <BrowserRouter> // Router의 가장 바깥으로 들어오는 녀석
      <div>
        <Switch>  // Route를 Switch로 감싸준다
          <Route path="/mypage">  // Route 안에 불러올 컴포넌트를 넣어준다
            <MyPage /> // 불러올 컴포넌트
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
    
const Icons () => {
    return (
      <div>
        <Link to="/mypage"><i className="far fa-user"></i></Link>
      </div>
      

とても簡単にコードで表します.
React Router Domの使用
リンクとしてロードする構成部品を設定します.
(Route path="リンクと同じアドレス")
リンクを作成するには(ここでアイコンをリンクとして作成するには)<Link>素子を装着します.
(リンク先＝「ルーティングと同じアドレス」)