React.js

Webアプリケーションの重要性が高まるにつれて、市場が拡大し、単一ページアプリケーション(SPA)が登場したため、GoogleはAngularを発売した.jsフレームワークが発売されました.しかし,構造,フレームワークの構成範囲が広いため,難易度が高く,データストリームが把握しにくいという問題がある.そのため、Facebookは既存の問題を解決するために行動します.jsフレームワークが発売されました.

高速高効率レンダリング

再利用可能なコンポーネント構造(モジュール化)

一方向データストリーム構造(直感的)

WebAppを作成するための完全なフレームワークではないので、外部ライブラリ、モジュールを利用する必要があります.しかし、プラットフォーム間最適化(React Native,React 360)は、低コストで迅速な開発速度でWebApp市場を拡大した.

React.jsの特徴

01.DOMと仮想DOM

ステータスの変化を検出して仮想DOMに適用し、一度にDOMに渡すことで、ブラウザの表示回数を減らし、パフォーマンスを向上させます.

この場合、Elementが所有するコンテンツを修正することは、DOMを修正してDOM Treeを再構築する必要があることを意味する.
つまり、Javascriptを簡単に使えば、それぞれ次のようなレンダリングが可能になります.

const root = document.querySelector('#root');
const liTags = document.querySelectorAll('li');		// List

// 화면 렌더링 발생 1
liTags[0].textContent = 'red apple';

// 화면 렌더링 발생 2
liTags[1].textContent = 'yellow banana';

// 화면 렌더링 발생 3
liTags[2].textContent = 'yellow mango';

仮想DOMは、次のように、document.createElementを使用してレンダリングされます.

const root = document.querySelector('#root');
const virtualDOM = document.createElement('ul');
virtualDOM.classList.add('list');

const appleLi = document.createElement('li');
appleLi.textContent = 'red apple';

const bananaLi = document.createElement('li');
appleLi.textContent = 'yellow banana';

const mangoLi = document.createElement('li');
appleLi.textContent = 'yellow mango';

virtualDOM.appendChild(appleLi);
virtualDOM.appendChild(bananaLi);
virtualDOM.appendChild(mangoLi);

// 이 당시 한 번 뷰가 다시 렌더링 된다.
root.replaceChild(virtual.DOM, root.querySelector('ul'));

つまり、1つずつレンダリングするのではなく、変化全体を一度にレンダリングし、変化した部分だけを呼び出してレンダリングするので、より効率的に動作します.

02. State

[状態](Status)という特定の値を使用して一方向データ転送を実行し、共有データを使用してレンダリングを制御できます.すなわち、ステータスを設定することで、コンポーネントのステータスを管理することができる.stateおよびpropsは、コンポーネント内で定義され、生成され得る.この2つは、スクリーン上でレンダリングする必要があるか、レンダリングに必要な特定の値を表します.(ステータスコントロール、すなわちstateの値の変化に従ってレンダリング画面を生成するルール.)すなわち、addEventListenerおよびremoveEventListenerを使用して、特定の場合にレンダリングされるコンテンツを管理することができる.stateおよびstateは、いずれも文字、定数、関数、配列およびオブジェクトを含むことができるが、propsはコンポーネントが有する特定の状態の値であるため、コンポーネントからstate関数に変更することができ、setStateは特定のコンポーネントが与える値であり、変更できない値を有する.ただし、親はcalback関数でprops変更できます.

03. JSX

HTML、CSSの特性を反映しながらJavascriptファイルを作成するには、このJavascriptファイル内でHTML構文を使用するのがJSX構文であり、React環境でビューを作成するために使用されます.

04. Component

State(ステータス)やJSX fileなどを組み合わせて親子関係に接続し、Calback関数を使用して管理できます.
コンポーネントにはクラス、関数型があり、通常は関数型が使用されます.これらのコンポーネントを組み合わせてWebアプリケーションを構築できます.
また,setStateにより親子関係,一方向構造を形成し,固定不変のpropsをCallback関数の形で伝達することができる.