18-20日目210811-13 CodeStates

3日間勉強したReact
以前JavaScriptを勉強していたときは、他のプログラミング言語と似ている点が多かったので、あまり難しくはありませんでしたが、reactは初めてなので、よく知らないし、難しいです.
それでも一生懸命勉強を探していて、コデスタッツのSection 1が終わった後、HA試験にも合格しました.

反応とは?

Reactは、Facebook上でフロントエンド開発のために作成されたJavaScriptオープンソースライブラリです.
Reactの3つの特徴

宣言
以前学習した方法はJSXを用いて宣言プログラミングを行い,HTML/CSS/JSをそれぞれのファイルに書き込んで1ページを表示し,リアクターはJSXを用いて1つのファイルを明確に書き込むことであった.
JSX(JavaScript XML)
reactでUIを構成する際に使用するJavaScriptの構文を拡張します.(JSXはReact Elementを生成します.)
JSXはJavaScriptの構文を拡張していますが、ブラウザはすぐに実行できません.
Baelは、JSXをブラウザで理解できるJavaScriptにコンパイルします.
以前はWebページを作成するためにHTML/CSS/JSファイルを別々に作成していましたが、reactではJSXとCSSのみを使用してJavaScriptを使用して表記形式の(HTMLなど)コードを記述しDOMに配置します.

構成部品ベース
1つの機能を実現するために,複数のコードに基づくコンポーネントを開発する.
機能のコンポーネントを作成するメリットは、コンポーネント間で独立して動作し、繰り返し使用できることです.これにより、生産性が向上し、メンテナンスが容易になります.

汎用性
reactionはJavaScriptライブラリです.
典型的なフレームワークAngularとは異なり,JSを任意のプロジェクトに柔軟に適用できる.
また,反応自機を用いてモバイル機器を開発することも可能である.
フレームとライブラリ
フレームワーク:フレームワークまたはインフラストラクチャを指し、制御逆転概念を応用する代表的な技術であり、ソフトウェアの特定の問題を解決するために相互に協力するクラスとインタフェースの集合である.
ライブラリ:単純で使いやすいツールの集合
ブログのフレームワークとライブラリの違いを参考にしましたが、これまで理解しにくい概念がたくさんありました.

SPA(Single Page Application)

以前のWebサイトでは、ユーザーがWebサイト内の他のページに移動すると、ブラウザは毎回新しいWebサーバから新しいHTMLファイルをロードし、異なるページを表示していました.
時間が経つにつれて、Webサイトはますます複雑になり、アプリケーションはますます多くなり、ユーザーとサーバの間のインタラクションもますます多くなります.
インタラクションによってページが変化すると、ページが再ロードされるたびに、Header、Navigation Barなどの重複要素がロードされるたびに、サーバに不要なトラフィックが発生します.△これは速度と性能の低下を招く.
SPAは、Webアプリケーション、単一ページアプリケーションの略で、サーバを介してWebページの更新に必要なデータを受信し、データを使用してHTML要素を動的に生成して画面に表示する.

React Router

SPAには1ページしかありませんが、1つの画面は使用されません.
TwitterのようなSPAでは、1ページにメイン画面、通知画面、マイページ画面などを表示する必要がある場合、各画面に1つのアドレスを指定し、アドレスに応じて異なるビューを表示することも考えられます.

このような異なるアドレスに基づいて異なるビューを表示するプロセスをルーティング(Routing)と呼び、「パスに基づいて変更する」ことを意味する.
しかし,React自体にはこのような機能は存在しない.
REACT SPAの開発では、REACT ROTERと呼ばれるライブラリを最もよく使用してルーティングを行う.
React Routerの主要素子は大きく3種類に分けられる.

ルータとして機能するBrowserRouter
BrowserRouterコンポーネントは、ページをリフレッシュすることなく、HTML 5のHistory APIを使用してWebアプリケーションでアドレスを変更できます.
親にBrowserRouter構成部品を作成する必要がありますが、残りのReact Router構成部品は使用できます.

スイッチとルーティングが一致する

パス
スイッチコンポーネントは、複数のルーティングコンポーネントを囲み、パスが一致する単一のルーティングをレンダリングすることができる.
スイッチを使用しない場合は、一致するすべての要素がレンダリングされます.
Route構成部品は、path属性を指定することによって、アドレスがpathに一致するときに表示される構成部品を指定します.(Route構成部品にReact Elementを作成)

パスを変更するためのリンク
リンク構成部品は、接続パスとして機能します.
ページを再読み込みせず、ページアドレスのみを変更します.

Props

構成部品のプロパティを表します.
渦(上位素子)から伝達される値には変更されない.
reactコンポーネントは、レンダリングするreact Elementを返すためにpropsを転送パラメータ(パラメータ)としてスクリーンに渡すJavaScriptの関数またはクラスです.
Propsが上流エレメントから下流エレメントに渡されると、propsはオブジェクトとして渡され、任意のタイプの値を入力することで渡すことができます.
propsは、外部から伝達される不変の値であるため、読み取り専用オブジェクトです.

State

素子の状態を表す.
関数内で宣言された変数のように、構成部品内で管理されます.
Reactは、stateを処理するためにusStateという関数を提供します.

import { useState } from "react";

//useState사용법
//const [state명,state갱신함수명]=useState(state초기값)

//ex
const [isChecked,setIsChecked]=useState(false);

初期値falseというischeckedというstateとischeckedを更新するためのsetIschecked関数が宣言されています.
宣言されたischeckedというstateは、変数のようにJSXで自由に使用できます.
ただし、ischeckedというstateを更新するには、直接値を再割り当てするのではなく、state更新関数setIscheckedを使用する必要があります.

//isChecked를 true로 바꾸고 싶을 때
ischecked=true  //X
setIsChecked(true)  //O

ステータスを変更して、構成部品を再レンダリングして変更のステータスを反映するには、更新関数を使用してステータスを変更する必要があります.