3週目

[カリキュラムの目標]

イベントリスナーを使用できます.

react-routerは、アドレスに応じて異なるページを表示できます.

が事前に決められた住所でない場合、「あ!「人を間違えたんだ!」ページを見せてあげることができます.

Reduxを使用してステータス管理を行い、次のステータス管理プロセスを理解します.
(デフォルト値がある→何をするか(「何をするかを決める!→何をするかを決める!」)プロセスは事前に必要です!)→値段が変わったんじゃないですか?→デバイスを教えて!

Redux hookを使用します.

第1話-イベントリスト

Event Listerは、ユーザーの行動を観察し、彼らに伝えます.
反応中、元素はRefで捕捉される.その後、addEventListerを追加します.
Event listenerの追加を購読するそうです.
e.target>イベントが発生した要素の取得
this.circle.current.addEventListener(1-イベント、2-動作)
this.circle.current.addEventListener(「mouserover」、this.hoverEvent)マウスのサスペンション時にマウスのサスペンションイベントを実行

2強-ルーティング

ルーティング:ブラウザのアドレスに応じて異なるページを表示することをルーティングと呼びます.
リアクターは、サーバがHTMLを1つしか提供しないアプリケーションを指す個別のページアプリケーション(SPA)で構成されています.
一つだけあげる理由の中で一番大切なのは使用性です.
ページを移動するたびに、サーバが提供するhtmlで画面を置き換えると、状態を維持することが難しく、変更されていない部分を再ロードすることもあるため、効率が低下します.
欠点は、静的リソース(HTML、CSS、JS)を一度だけ受信することです.最初はすべてのコンポーネントが受信されるため、ユーザーが使用したくないページがすべてインポートされ、コンポーネントの数に応じてロード速度が遅くなります.

4強-反応中にルーティングを処理

パスが「/」と「/cat」があると言ったとき
「/cat」に入ると、「/」の構成部品も画面にロードされます.
これは、「/cat」にもスラッシュ(/)が含まれているからです.
これを防ぐには、プロパティexcel->を使用します.正しい入力が必要で、重複した値へのルーティングを防止できます.
使用例)

<Route path="/cat/:cat_name" exact component={Cat}></Route>

ページの移動方法

1 - Link
リンクをインポートし、移動するurlを作成します.

<Link to="/" exact>Home으로</Link>
<Link to="/cat/cat_name" exact>Cat으로</Link>
<Link to="/Dog">Dog으로</Link>

2 - History
useHistoryフックを使用します.

import { useHistory } from "react-router-dom";
const Dog = (props) => {
    const history = useHistory();
    console.log(history);
    return (
        <div onClick={() => {
            history.push("/Cat");
        }}>
            Dog화면 입니다!
        </div>
    );
};

6講-無効なアドレスの処理

react-router-domで提供されるスイッチの使用
👇 詳細な説明
( https://baeharam.netlify.app/posts/react/why-switch-is-needed )

7強-Redux

グローバル・データ・リポジトリとして
サブデータにデータを提供しようとするときに発生するpropsドリルを防止できます.
グローバル・データ・リポジトリでは、必要な場所にデータを直接送信できます.

潮流

サブスクリプションのコンポーネントの変更を要求する>>アクション(派遣)>>リダイレクト>>ショップの変更>>再サブスクリプションのコンポーネントへの降格

ベスト8

道徳的特徴

store

のみ

州は行動でしか変更できません.

以前の状態は、変更する必要がなく、変更した新しいオブジェクトに戻る必要があります.

パラメータ(パラメータ)が同じ場合は、常に同じ値を返さなければなりません.(純関数)

10鋼-接続部品とストレージ

作成したstoreを構成部品に注入します.このように表現します.
index.jsからインポートします.
import {Provider} from "react-redux";
import store from "./redux/configStore"
BrowserRouterのように、<Provider>でアプリを包みます.

11スチール-構成部品でワイヤデータを使用する方法

ストレートパンチ
useDispatchは、データの更新時に使用します.
userSelectorはデータのインポートに使用します.
import {useDispatch, useSelector} from "react-redux";

ページを作成する順序は?

表示→ルーター→機能

関数(function)(by.dream符号化Elly)

関数はプログラムを構成する基本構造ブロックである.

サブルーチンとも呼ばれ、複数回再利用可能な利点がある.

のタスクまたは値を計算します.

関数の構造

関数名(パラメータ1、パラメータ2...){機能、戻り}

関数は1つのことしかできません.

関数は何かを動作させるため、動詞の形式で

と命名された.

JSでは、関数はオブジェクトとして扱われるので、変数に割り当て、パラメータ(パラメータ)に渡し、他の関数を返すことができます.

return

各関数にはreturnが含まれていますが、よくありません.
これはreturn undefinedに等しく、省略できます.

わりあて

匿名関数の指定(anonymous function)

const print = function () {
   console.log(print)
}

関数呼び出し
print(); >> ログに印刷
const printAgain = print;
printAgain(); >> ログに印刷

Callback

状況や条件が満たされたときに呼び出される関数

矢印関数

簡略化関数
常に名前のない匿名関数
例1)

const simplePrint = function () {
    console.log('simplePrint');
};

    🔻🔻🔻🔻🔻🔻🔻🔻🔻

const simplePrint = () => console.log('simplePrint');

例2)

const add = function (a, b) {
    return a + b;
}
    🔻🔻🔻🔻🔻🔻🔻🔻🔻
const add = (a, b) => a + b;

かっこ

const A = () => {
    return console.log('A 입니다')
}

括弧がある場合は、文が返されず、値は返されません.

今日の気持ち

パソコンは間違いありません.

すべての間違いは私が犯したのです.