What is REACT!

ユーザーインタフェースを作成するJavaScriptライブラリ...
「リトラクト」を使用すると、アプリケーションのページ機能に従ってコンポーネントを処理したり、JSXを使用したりできます.

function App(){

  return (
  <h1> 안녕하세요 리엑트! </h1>
  )
}

上の図に示すように、構成部品内でレイアウトすることができ、可読性も良好である.JSXでjavascript構文を使用したい場合は、{ }のカッコでjavascript構文を使用することもできます!

function App(){

  return ({
  for(let i = 0 ; i < 3 ; i++){
	return <h1> 안녕하세요 리엑트! </h1>
}
  })
}

以上のようにjavascript構文を使用すると、<h1> 안녕하세요 리엑트! </h1>が3回生成されます.
Reactの最大の利点は、ページのリフレッシュを必要とせずに、優れた可読性とステータス管理により、ステータスに応じてUIを再ロードすることです.

Props

propsは、親コンポーネントがサブコンポーネントにデータを渡したり受信したりするために使用されます.

State

リトラクトでpropの値またはstateの値を変更すると、stateまたはpropsを持つ構成部品のrander関数が再呼び出されます.また、rander関数が再呼び出されるため、rander関数サブアイテムの要素が持つ各rander関数も呼び出される.これで画面を再描画できます.
どのようなHTMLを描くかを決める関数がランダーだからです.

Props vs State

propsは外部から伝達される値です
例:名前、性別

stateは内部変化の値です
例:年齢、現在住んでいる場所、就職するかどうか、結婚するかどうか

≪イベント｜Events｜ldap≫

イベント関数の最初のパラメータでpreventDefault関数を実行すると、イベントラベルの基本的な動作をブロックできます.
親構成部品が子構成部品に値を渡すと、子構成部品の操作装置Propsによって伝達されます.
子構成部品が親構成部品の値を変更する場合は、イベントを使用して変更できます.
stateを持つ構成部品を作成するには、ES 6 class構成部品を使用する必要があります.

リトラクトから構成部品を作成するには

リトラクトで構成部品を作成する方法は2つあります.
関数型とクラスです.
両者には違いがあり、最大の違いは、現在の状態を維持するにはクラス要素で構成されなければならないことです.
関数型にも状態があります.生成して間もないHOOKSを使えば、関数型素子でも状態を管理できます.

HOOKS

初めての接触退刀はclass素子を使う方式ですが、HOOKSに触れると本当に気持ちが良く、簡単で、状態を変えるのも便利です.classコンポーネントでステータスを変更するにはsetStateで変更する必要があり、バインドする必要がありますが、hooksでは必要ありません.
HOOKSの代表的な方法はusStateとuseffetである.
ステータスはuseStateで管理できますが、useffetで管理できます.componentWillMountおよびcomponentWillUnmountの代わりに使用することができる.
以下に示すように、様々なデータ型に従ってusStateを使用する例が実装されている.
簡単に言えば、userStateの前の配列は1番目に現在の状態が割り当てられ、2番目に状態関数が割り当てられ、userStateの後ろの括弧に初期値が存在する.

function App() {
    const [count, setCount] = useState(5);
    const [mode, changeMode] = useState('read');
    const [arr, pushArr] = useState([1,2,3])
    const [obj, update] = useState({ name : '김코딩', age : 20 })
    const [email, submitEmail] = useState('[email protected]')
    

  return (
    <>
    <h1>{mode}</h1>
    <h1>{count}</h1>
    <h1>{arr}</h1>
    <h1>이름은 {obj.name} 나이는 {obj.age}</h1>
    <h1>이메일은 {email}</h1>
    <h1>{JSON.stringify(obj)}</h1>
    {follow(mode)}
    <button onClick ={function(){
      
      setCount(count + 1)
      
      changeMode('write')
      
      let newarr = Array.from(arr)
      newarr.push(count)
      
      pushArr(newarr)
      
      update({ name: '박해커',  age : obj.age + 1})
      
    }}>updated!</button>

    <input placeholder = 'email' value ={email} onChange = {(e) => {
      const { target : {value} } = e
      console.log(value, e)
      submitEmail(value)
    }}></input>
    </>
  );
}

}

RECT使用の残念な点

初めてリバースを用いた場合,コードが短く,素子深さが深くないためそれほど不便は感じられなかったが,深い素子の研究に伴い,最下層のサブ素子から親状態に近づくことは困難であった.なぜなら、子供が親の状態に近づくには、親から子供までのすべての要素にpropsとして伝えなければ、子供に届かないからだ.子供から親の状態を変える時もそうだ.これらの欠点はReduxで解決できるそうで、次はReduxを整理する時間です.