反応を知る

現在業界で最も多く使用されているライブラリのReactを整理します
なぜreactを使うのか、どのような構造で働いているのかについて!!
現在のWebは、静的で簡単なページではなく、複雑で動的なWebアプリケーションです.
ページの規模はますます大きくなり,多様なUI,UXを動的に実現するには,複雑で多状態を管理するタスクが非常に煩雑になる.
大量のデータとメンテナンスコードをより容易に管理するために
Frontend Framework(Library)
このうち最も一般的な3つはAngular、Vue、Reactである.
そのうちAngular、Vueはフレームワークであり、Reactはライブラリである.

ライブラリとフレームワークの違いは?

ライブラリとフレームワークの共通点は、他の人が作成したツールを使用することです.
誰がトレンドの違いを持っているのか
フレームワークには独自の全体的なプロセスがあります.
開発者は、このツールに必要なコードを作成します.
ライブラリは開発者の全体的なプロセスであり、開発者が必要な機能を実現したい場合に使用できます.

なぜreactを使うのですか?

反応器はUIを開発するために作られた.
応答を使用すると、ユーザーと対話できるダイナミックUIを簡単に作成できます.
複雑で多様なWebアプリケーションを実装場合、
仕事の効率を高め、大量のデータを管理し、
コードのメンテナンスが便利だからです.

反応とは?

反応器はFacebookで作られています.
フェイスブック上で開発・管理するユーザーインタフェースを作成するJavaScriptライブラリです.
そのため、Facebookの反応を管理する開発者は自動的に更新します.

Reactの動作原理

DOMでは、JavaScriptでHTMLにアクセスするために要素をオブジェクト化できます.

バーチャルドーム(バーチャルDOM)

リアクターは仮想ドームを使用して実際のDOMにアクセスするのではなく,抽象要素によってオブジェクトを組織する.(実際のドームのコピーのように)

仮想ドームに反応するには

(特定のページでデータが変化した場合、応答を使用してドームを更新するプロセス)

データが更新されると、UI全体が仮想ドームに再表示されます.

以前の仮想ドームの内容と変化した仮想ドームを比較します.

で変更された部分だけが実際のドームに適用されます.

で変更された部分だけが実際のドームに適用されるため、レイアウト計算は1回のみ実行されます.

すなわち,必要な部分のみを更新し,内部状態と実際の状態を同一にする.これは、データが変更されるたびにページ全体をレンダリングするよりも効果的な方法です.
これにより、ブラウザで実行される演算量を削減し、パフォーマンスを向上させることができます.仮想DOMはレンダリングされないため、計算コストが低い.すべての変化を仮想DOMによってパッケージ化し、実際のDOMに渡します.

Reactの特徴

Component

反応器はUIを複数のコンポーネントにするため、高い再利用性を有する.
構成部品をインポートするだけです.
アプリケーションが複雑になっても、コードのメンテナンスと管理は簡単です.
構成部品は、関数型とタイプの2つの方法で宣言できます.

//클래스형
import React from 'react'

class Component extends React.Component {
  render() {
    return (
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

の構成要素は、次のとおりです.  render  関数が必要で表示するJSXを返します.

//함수형
import React from 'react'

const Component = () => {
  return (
			<div>
				<h1>This is Functional Component!</h1>
			</div>
		)
};

export default Component

JSX(Javascript Syntax Extension)

JSXとは何ですか.リアクターで使用されるjavascript拡張構文.

JavaScriptを表すには、{}の

に入れる必要があります.

class vs. className
属性はCamelCaseで示す

クラスで、クラス名

ではありません.

Self Closing Tag
(ex) <div></div> -> <div />

には、すべての要素をカバーするトップレベルの要素

が必要です.

<div>
  <button className="btton"} 
    onClick={this.goToMain}>로그인
  </button>  
</div>

JSXの大きな特徴は、DOMに追加のノードを追加することなく、1つのコンポーネント内で複数の要素(サブ要素)を簡単にグループ化できることです.これは、不要なdivタグの生成を防止するのに役立ちます.
Resact Fragment(<>……)を使用します.

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>