[WIL]8月第2週

Weekly I Learned (08. 09 ~ 08. 15)

1. SPA

従来のWebサイトでは、ユーザーがWebサイトの他のページを閲覧する場合、ブラウザは毎回HTMLファイルをロードしてページを表示する必要があります.
しかし、Webサイトが複雑になるにつれて、アプリケーションの形式もますます多くなり、ユーザーとサービス間のインタラクションもますます多くなり、重複する要素がすべてロードされるたびに、サーバとの間の不要な通信量が発生します.
ユーザーの観点から、すべてのページを読み込むたびに応答速度が遅くなることが、ユーザー体験の低下の重要な原因です.

SPAは単一ページアプリケーションの略で、WebアプリケーションまたはWebサイトを指し、サーバから新しいページをロードするのではなく、サーバから受信したデータをブラウザで更新することで、対応する部分のみを更新することで動作します.
SPAの利点は、アプリケーションとユーザとの間でいつでもインタラクションが発生する場合、SPAはページ全体をレンダリングするのではなく、必要な部分だけを更新するため、SPAはユーザの動作に迅速に応答することができることである.
また,サーバの観点から,要求されたデータをサーバに転送するだけで,過去の過負荷問題を著しく低減できる.画面全体を再レンダリングする必要がないので、より良い体験ができます.
しかし、欠点もある.ブラウザは、最初の画面のロード時にHTMLファイルを取得し、その中のscript tagからJavaScriptファイルを再取得します.このとき、最初の画面のロード時に取得したHTMLファイルはほとんど空で、ほとんどのコードはJavaScriptファイルにあります.
当然、JavaScriptファイルは重くなります.したがって、このJavaScriptファイルを待つ時間は、最初の画面のロード時間を延長します.
第二に、検索エンジン(例えばNaverやGoogle)とは異なり、SPAのHTMLファイルには他のデータがないため、検索エンジンが正常に動作しにくいため、検索エンジンの最適化に不利である.そのため、検索の重要性を暴露するWebアプリケーションは、検索エンジンの最適化に備えなければならない.
しかし,検索エンジンの発展によりSPAが検索エンジンの最適化に対応できるという欠点は消えつつある.

2. Wireframe

「ワイヤフレーム」(Wireframe)とは、設計に入る前にワイヤ(wire)を使用して輪郭線(frame)をキャプチャすることを意味します.これにより、開発者は設計概念とサイト機能を理解することができます.
「木製」(mockup)とは、デスクトップやスマートフォンにフレームを追加し、デザインをより直感的に分かりやすくすることです.
ページを作成する前に、どのコンポーネントを作成するか、どのように配置して組み合わせるかを常に設定することが重要です.
たとえば、画面上部には、上部全体を囲む「ヘッド」と呼ばれる構成部品が存在します.
Headerコンポーネントは、常にアプリケーション内の任意のページの上部にあるため、設計ロジックを記述する必要があると考えられます.
画面の中央には、ユーザーのプライマリ・コンテンツに提供されるコンテンツ・リストと呼ばれるコンポーネントがあります.このコンポーネントには、同じフォーマットのコンテンツが含まれており、画面を繰り返し整理しているため、コンテンツと呼ばれるコンポーネントを1つだけ作成し、再使用することにしました.
次に、これらのコンテンツを含むコンポーネントの特定のシェイプ、提供された情報、クリック時に呼び出されるイベントなどを考慮します.
これは、アプリケーション内のデータがコンポーネント間でより有機的に交換されるように、設計時に常に考慮され、設計されることを意味します.

3. React Router

SPAには1ページしかありませんが、1つの画面は使用されません.
たとえば、私たちが使用しているSNSを表示する場合は、ホームページグループページ、通知ページ、私のページなどの画面が必要です.
また、「アドレス」も画面によって異なります.これにより、異なるアドレスに基づいて異なるビューを表示するプロセス「パスに基づいて変更」が表示されます.「ルーティング」(Routing)と呼ばれます.
ただし、React自体にはこの機能は含まれていません.私たちは自分で住所ごとに異なるビューを表示します.したがって、react SPAでは、ルーティングのためにreact routerライブラリが最も一般的に使用されます.
React Routerの主な構成部品は、次の3つに分類されます.ルータとして機能するBrowserRouter、パスに一致するスイッチとRoute、パスを変更するためのリンク.
これらの構成部品を使用するには、React Routerライブラリから個別に読み込む必要があります.

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

importは、非構造化割り当て(destructuring assignment)と同様に、必要なモジュールをロードする役割です.
BrowserRouter
BrowserRouterは、ページをリフレッシュすることなく、HTML 5のHistory APIを使用してWebアプリケーションでアドレスを変更できます.
Route構成部品を使用するには、親にBrowserRouterを作成する必要があります.
Switch, Route
パスに一致する構成部品として機能します.
スイッチコンポーネントは、複数のルーティングを囲むことができ、1つのパスが一致するルータのみをレンダリングします.スイッチを使用しない場合は、一致するすべての要素がレンダリングされます.
Route構成部品pathプロパティを指定して、そのpathに表示する構成部品を指定します.リンク構成部品が定義したURLパスと一致している場合にのみ機能します.
Link
パスを接続する構成部品.HTML 5 History APIでは、ページを再ロードせずにアプリケーションを保持するためにページのアドレスのみを変更します.
! RealtDOMレンダリングを使用すると、リンク要素はaラベルになります.

React Router 에서 a 태그가 아닌 Link를 사용하는 이유?

a 태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 되죠.
하지만 Link 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있습니다.

次に、実際の使用例を示します.
まず、ページを表示する構成部品を作成します.

// Home 컴포넌트
function Home() {
  return <h1>Home</h1>;
}

// MyPage 컴포넌트
function MyPage() {
  return <h1>MyPage</h1>;
}

// Dashboard 컴포넌트
function Dashboard() {
  return <h1>Dashboard</h1>;
}

次に、各構成部品に移動するメニューを作成します.ulラベルとliラベルを使用して作成

function App () {
  return (
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
             MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
      </div>
  )
}

export default App;

次に、BrowserRouterのRoute構成部品を使用する環境をメニューに設定します.
次に、アドレスパスを作成した3つの構成部品とスイッチとRouteに接続します.
Routeのpathプロパティを使用してパスを作成します.Routeラベルに接続する構成部品を入れます.

function App () {
  return (
   <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              Home
            </li>
            <li>
              MyPage
            </li>
            <li>
              Dashboard
            </li>
          </ul>
        </nav>
    
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about"> 
            <MyPage /> 
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
   </BrowserRouter>
  )
}

最後に,リンクのto属性を用いてルーティング素子に設定されたpathアドレスを関連付ける.こうして完成した最終コード

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <MyPage />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;