元のエンコーダをリカバリクローン符号化する過程で、いくつかの新しい知識を学びます.

axios APIの呼び出し

Axios公式githubはAxiosをPromiseベースのHTTPクライアントと呼んでいる.
fetch関数よりaxiosが好きだと言われていますが、原因は何ですか?
次の切符が答えになるかどうか分からない.

JSONも自動変換できますよね!
AxiosはPromiseベースで、async/awaitコードを非常に容易に実現できます.長所がたくさんありますね
以下の特徴があります.参考にしてください.

オペレーティング環境によれば、ブラウザ内のXMLHttpRequestオブジェクトまたはノード.js上のhttp api

を使用

ES 6 API

を使用
変換

要求及び応答データ

HTTP要求キャンセル

HTTP要求と応答を自動的にJSON形式

に変更する
今回のクローン符号化ではaxios要求apiを用い,同期処理のために以下の操作を行った.
apiリクエストが完了しなくても、次のタスクを続行できないためです.
パッケージ関数の前にasyncキーワードを書き、待機しているターゲット関数の前にawaitを書きます.このオブジェクトはaxios関数であるべきです.
次の内容が含まれます.

// Home 컴포넌트
class Home extends React.Component {
  ...
  // 비동기를 동기적으로 처리하는 꿀팁
  getMovies = async () => {
    const { data: { data: { movies } } } = await axios.get('url')
    // api 호출이 완료되면 상태를 변경해줍니다.
    this.setState({ movies, isLoading: false })
  }
  ...
}

react-router-dom

単一ページアプリケーション(SPA)を実装する際に最も一般的なルータの1つです.
応答としてSPAを実装することは、要求された構成部品のみがローカルレンダリングされることを意味する.それを助けたのはreact-router-domです.
まず、パッケージを使用するには、端末で次のコマンドを使用してパッケージをダウンロードします.

npm install react-router-dom

中にはHashRouterとRouteがあります

HashRouter

ルーターにはBrowserRouterとHashRouterの2種類があります.
あるブログによると、BrowserRouterはHTML 5のhistory locationを使ってUIを更新している.
HashRouterはURLハッシュを利用したルーターです.静的ページに最適です.
この違いについては、ブログの記録を単独で行う必要があります.
一般的に要求と応答からなるダイナミックページが作成されるため、BrowserRouterが一般的に使用される.
クローンコードはHashRouterを使用しています.

Route

リクエストされたpathnameに対応する構成部品をレンダリングします.
すべての構成部品は一度にレンダリングされません.とても面白いです.

使用例

ホーム素子にexcept={true}を書き込むのは、リアクターが素子を読み取ると、そのURLに含まれるすべての素子が取得されるからである.以下の場合、except={true}を書かずに「/about」のエレメントを呼び出すと、「/about」に対応するエレメント「/」と「/about」が読み込まれます.

import { HashRouter, Route } from "react-router-dom";

function App() {
  return <HashRouter>
    <Navigation />
    <Route path='/' exact={true} component={Home}/> // 각 path에 해당하는 컴포넌트를 불러옵니다.
    <Route path='/about' component={About}/>
    <Route path='/movie/:id' component={Datail}/>
  </HashRouter>
}

Link

リンクタグはhtmlのaタグとよく似ています.ただし、aタグはSPAを実施するのに適していない.aラベルの特性はページを移動すると画面が再ロードされるため
ただし、リンクラベルはURLを変更するだけで、画面を再ロードすることなく、ページの移動を許可します.
使用方法はaリンクと少し異なります.aリンクはhrefに移動するurlを指定します.ただし、リンクタグはurlをtoオブジェクトのpathname値として指定します.

// a 링크
<a href="서울특별시 url">서울특별시</a>

// Link 태그
<Link to={pathname: "여수시 url"}>여수시</Link>

urlに移動するときにstateをオブジェクトのパラメータに渡すこともできます.次のコードは、その使用例です.

function Movie({id, year, title, summary, poster, genres}) {
  return (
    <Link to={{
      pathname: `/movie/${id}`,
      state: {
        year,
        title,
        summary,
        poster,
        genres
      }
    }}>
  ...
  </Link>
  )

注意!!!
リンクタグはルータでのみ使用できます.上に見たHashRouterかBrowserRouterを覚えていますか?
クローンコードを行い、これまで知らなかった情報を多く得た.
クローンコードを続けます.