反応とは?

Reactは、ユーザーインタフェースを構築するためのフェイスブック上に作成されたJavaScriptライブラリです.
ここでは、VueやAngularをフレームワークと呼びますが、なぜReactはライブラリなのでしょうか.
VUEまたはAngularは、ビューの論理実装位置(例えばMVCおよびMVW)とデータ処理の位置とを別々にプログラミングする設計モードを有する.しかしReactはビューのみに注目しているのでライブラリと呼ばれています.

Reactの特徴

JSX

コンポーネントに基づく

仮想ドーム

1. JSX(JavaScript XML)

Reactでは、JSXというJavaScript拡張構文を使用できます.
以下に示すように、JavaScriptでHTMLタグを使用できます.

const header = <header>헤더입니다.</header>

でも.jsファイルに上記のコードが含まれている場合、ブラウザにエラーが発生します.したがって,babelというツールを用いてJSX構文をブラウザが理解できる言語にコンパイルする必要がある.

JSXでのルール

は装飾品で包まれます.

//bad
const wrong = (
  <div></div>
  <div></div>
)

// good
const right = (
 <div>
    <div></div>
    <div></div>
 </div>  
)

const right = (
 <> //만약 두 개의 컴포넌트를 사용해야 한다면 Fragments로 감싸 주면 된다.
   <div></div>
   <div></div>
 </>
)

JavaScriptコードを記述する場合は、{}(カッコ)内で記述する必要があります.

const name = '리액트'
const jsCode = (
  <div>Hello {name}</div> // => Hello 리액트
)

JSXではif文は使用できませんので、3つの演算子を使用する必要があります.

const name = '리액트'
const good = (
  <div>{name === '리액트' ? '리액트' : '리액트가 아닙니다.'}</div>

内装造形

const inline = (
  <div style={{backgroundColor:'black'}}></div> // 카멜 표기법으로 작성해야한다. 
)

Ellientのクラス名を作成する場合は、クラスではなくクラス名を使用する必要があります.

const className = <div className="name"></div>

2.コンポーネントベース

構成部品は独立したユニットモジュールであり、再利用可能な意味を有する.
Webページを作成するには、多くの要素が含まれています.ページごとに同じ要素を使用する必要がある場合は、HTML、CSS、JavaScriptも同様に記述する必要があります.そうなると非常に非効率になりますしかし、Reactの要素はこれらの重複要素を除去することができる.モジュールとして使用されるため、importで同じ要素をインポートして表示できます.

実装コンポーネント

2つの方法が反応中に素子を宣言することができる.1つは関数型素子で,1つはクラス素子である.

系素子

import React, {Component} from 'react';

class App extends Component{
  render() {
    const name = 'react';
    return <div>{name}</div>
  }
}

export default App;

クラス構成部品にはrender関数が必要です.render関数はJSXを返さなければなりません.

関数型素子

import React from 'react';

function App() {
  const name = 'react';
  return <div>{name}</div>
}

構成部品を宣言する2つの方法の違いは、クラス構成部品では、ステータス管理とライフサイクル機能を使用したり、任意の方法を定義したりすることです.一方、関数構成部品では、ステータス管理またはライフサイクルAPIは使用できません.ただし,Hooks機能を導入すると,機能素子は状態管理やライフサイクルAPIを用いることも可能である.

3.仮想DOM（仮想ドーム）

仮想DOMとは,実際のDOMと同じ仮想ドームを作成することである.
応答において、データが変化すると、仮想DOMは、本物のDOMではなく更新され、以前のDOMと比較して変更された部分のみが本物のDOMに適用される.
リアルDOMを更新する3つのプロセス
1.データを更新すると、現在のUIが仮想DOMに再表示されます.
2.従来の仮想DOMを現在のコンテンツと比較する.
3.変更部分のみを実際のDOMに適用します.