React社で一生懸命勉強します!28

#28新しい環境への適応

react-routerを使用したレスポンス・ページ・アプリケーションの作成

※スパとは？

は、単一ページアプリケーションの略です.名前の通り、これは個人アプリケーションを意味します.従来の構造で、複数のページから構成されています.
ユーザはページを要求するたびにリフレッシュし、ページをロードするたびにサーバからリソースを受信してレンダリングします.
現在、ネットワーク上で提供されている情報は本当に多いので、速度の問題が多く、この問題を解決するために圧縮とキャッシュを通じてサービスを提供しています.
しかし,これはユーザとのインタラクションが多い現代のWebアプリケーションでは不十分である可能性がある.サーバ側はレンダリングを担当します.これは、サーバリソースがレンダリングに使用されていることを意味し、不要なトラフィックも浪費されています.
したがって、レスポンスなどのライブラリやフレームワークを使用して、ユーザーのブラウザにビューのレンダリングを担当させ、アプリケーションをブラウザにロードし、必要なデータだけを受信します.
1ページに1つの画面しかないわけではありません.
たとえば、ブログを書くと、->ホームページ、記事、リスト、記事、執筆などの画面が表示されます.また、画面に基づいてアドレスを作成します.住所があってこそ、人々はブックマークをすることができ、グーグルなどのサービスを通じて流入することができるからだ.
異なるアドレスに基づいて異なるビューを表示することをルーティングと呼び、応答にはこの機能が組み込まれていません.したがって、ブラウザのAPIを使用してステータスを設定して、異なるビューを表示する必要があります.
今回理解するreact-routerはサードパーティ製ライブラリであり、式ではありませんが、最も一般的なライブラリです.このライブラリはクライアントのルーティングを簡素化します.また、サーバ側のレンダリングを支援するツールもあります.また、このルータはreact-ネイティブでも使用できます.
SPAの欠点

アプリケーションの規模が大きいほど、JavaScriptファイルのサイズが大きくなります.ユーザーが実際にアクセスしない可能性のあるページに関連するレンダリングスクリプトもロードされるためです.

JavaScriptを実行しない通常のロールバックプログラムでは、ページ情報を正しく受信できません.そのため、Google、NAVER、次の検索エンジンでは、ページが検索結果であまり明らかではない可能性があります.

にはjavascriptを実行するときにページが空になり、ユーザーが短時間で白いページを表示する可能性があるという欠点もあります.

プロジェクトの準備と基本的な使用方法

まず、反応ルータを使うアイテムを用意します.

$ npx create-react-app router-tutorial

次に、対応するプロジェクトディレクトリのルートディレクトリに移動し、ルータに関連するライブラリをインストールします.

$ cd router-tutorial
$ npm install react-router-dom

※ルータをプロジェクトに適用

ルータのインデックスを適用します.jsでは、BrowserRouterというコンポーネントを使用して実装することができる.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// * App 을 BrowserRouter 로 감싸기
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

※作成ページ

では、ルータとしてのページコンポーネントを作成します.
プレイヤー

初めてWebサイトにアクセスしたときに表示されるホームコンポーネントと

次にAboutコンポーネントを作成し、

のウェブサイトの紹介を示します.

srcのホームjsとAbout.jsを作成し、次のコードを参照すればいいです.

Home.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>홈</h1>
      <p>이곳은 홈이에요. 가장 먼저 보여지는 페이지죠.</p>
    </div>
  );
};

export default Home;

About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
    </div>
  );
};

export default About;

ページとして使用されるすべてのコンポーネントが完了しました.

※Route:構成部品を特定のアドレスに接続する

ユーザが要求したアドレスに基づいて他のコンポーネントを表示します.この場合、Routeというエレメントが使用されます.
使い方!

<Routes>
 <Route path="주소규칙" element={<보여주고싶은 컴포넌트 />}>
</Routes>

バージョン6に変換すると、RouteをRoutesに囲み、コンポーネントではなく要素を指定します.
既存のアプリケーション.jsコードを削除し、routeをレンダリングします.

App.js

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
<div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
</div>
  );
};

export default App;

完了するとnpm startを使用して開発サーバを実行します.
URLの末尾の/パスに入るとメインコンポーネントが表示されます...

/aboutパスに入ると、aboutコンポーネントが表示されます.

最初の5版ではexactというpropsをtrueに設定し、主にHomeに設定し、exactを使用しないと次のような結果になります.

出典:ベロフトとのモダン反応

※リンク：クリックして他のアドレスに移動

リンクコンポーネントは、クリックして別のアドレスに移動するコンポーネントです.
反応ルータを使用する場合、通常のaラベルは使用できません.使用する場合は、onClickでe.preventDefault()を呼び出し、アドレスを個別のJavaScriptに変換する必要があります.
逆に、aラベルの基本的な特性は、ページを再ロードするのではなく、ページを移動することであるため、Linkというコンポーネントを使用する必要があります.これにより、私たちの反応アプリケーションが携帯する状態も初期化され、レンダリングされた要素もすべて消え、レンダリングが再開されます.
したがって、aタグではなくリンクコンポーネントを使用して、ページを再ロードせずにブラウザのアドレスのみを変更します.
App.jsファイルにリンクコンポーネントを追加します.

App.js

import React from 'react';
import { Route, Link, Routes } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

ホーム画面

About画面

パラメータとクエリー

ページアドレスを定義するときに、フローティング値を渡す必要がある場合があります.
これはパラメータとクエリーに分けることができます...

파라미터: /profiles/velopert
쿼리: /about?details=true

これを使う上で守らなければならないルールはありませんが...

通常パラメータは、特定のidまたは名前を持つクエリーに使用され、

クエリーでは、キーワードを検索するか、リクエスト時に必要なオプションを指定します.

※ URL Params

Profileページでパラメータを使用!
/profile/veloperのように後でusernameを付けると、この値をパラメータとして取得します.
srcにProfileというコンポーネントを作成し、受信パラメータのサンプルコードを記述します.

Profile.js

import React from 'react';
import {useParams} from 'react-router-dom';

// 프로필에서 사용 할 데이터
const profileData = {
  velopert: {
    name: '김민준',
    description:
      'Frontend Engineer @ Laftel Inc. 재밌는 것만 골라서 하는 개발자'
  },
  gildong: {
    name: '홍길동',
    description: '전래동화의 주인공'
  }
};

const Profile = () => {
  const { username } = useParams();
  const profile = profileData[username];
  if (!profile) {
    return <div>존재하지 않는 유저입니다.</div>;
  }
  return (
    <div>
      <h3>
        {username}({profile.name})
      </h3>
      <p>{profile.description}</p>
    </div>
  );
};

export default Profile;

react-router-domのhook userParamsを使用して、構成部品への変換を決定できます.
では、Profileをアプリに適用します.
pathルールに/profile/:usernameを追加すると、match propsで渡すためにusernameに対応する値がパラメータとしてprofileコンポーネントに追加されます.

App.js

import React from 'react';
import { Route, Link, Routes } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profile from './Profile';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profiles/:username" element={<Profile />} />
      </Routes>
    </div>
  );
};

export default App;

サーバから/profiles/veloperパスを直接入力します!

/profiles/gildongパスを表示すると...

出力が良好であることを確認できます.

※ Query

今回はAboutページから照会を受けます.クエリーはpropsがルーティングコンポーネントに渡すlocationオブジェクトの検索値から取得できます.
locationオブジェクトは、現在のアプリケーションが所有するアドレスに関する情報を保持します.
このように...

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

ここでは、文字列形式のsearch値を確認する必要があります.客体形式に変えて、私たちは自分でやります.
これらの操作はqsというライブラリを使用して簡単に完了できます.
対応するライブラリをインストールします.

$ npm install qs

次に、Aboutコンポーネントから検索値のdetail値を取得し、trueの場合に他の情報を表示します.

About.js

import React from 'react';
import { useLocation } from 'react-router-dom';
import qs from 'qs';

const About = () => {
  const location = useLocation();
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
  });
  const detail = query.detail === 'true'; // 쿼리의 파싱결과값은 문자열입니다.

  return (
    <div>
      <h1>소개</h1>
      <p>이 프로젝트는 리액트 라우터 기초를 실습해보는 예제 프로젝트랍니다.</p>
      {detail && <p>추가적인 정보가 어쩌고 저쩌고..</p>}
    </div>
  );
};

export default About;

/about?detail=trueパスは、他の情報を表示します.
反応器のhook useLocationを使用している場合のみ、エラーが発生して出力されません.

注:ベロフォードとのモダン反応
感じ:

今日は反応ルータを知る時間があります.

は確かに1ページ操作で、ロード時間がなく便利です.