💡ステータスとは?

コンポーネント内の動的データ

コンポーネントが持つトピックのように、値を変更し続けるダイナミックデータや、ステータスを変更するなどの管理は、この機能を持つコンポーネントによって直接管理されます.

現在構成部品で作成および変更されているデータは、作成された構成部品でのみ変更できます.

素子の種類によって、2種類の使用方法があります

クラス要素は、

を使用し、それ自体が状態を有する

関数型素子はusStateという関数を使用し、Hookによって(usStateを例に以下で説明する)

を使用する.

関数で宣言された変数

ステータスは、常に動的に変化する特定のステータス(=値)です.
ステータス(=値)によって異なります


Reactでは、「構成部品」と呼ばれる構成単位で構成されています.
コンポーネントとは、プログラミング時に再利用可能な各独立したモジュールを指す.
(画面を構成する各要素を作成し、1ページにまとめるフォーマット)
この素子は、小さな部分を割って1つの素子に結合することもできる.1つの大きな構成部品では、複数の小さなツリー構造のようにすることができます.大きな要因には小さな要因があり、親子の関係が形成される.
構成部品は、その出力において他の構成部品を参照することができる.これは、同じ抽象要素がすべての詳細ステップで使用できることを意味する.

(例)関数型構成部品におけるusStateという関数

カウンタを例にとります.>
srcファイルのカウンタ.jsファイルを作成したら、コンポーネント(=レゴのブロック)を作成します.

//App.js

import Counter from "./counter";

const App = () => {
  return (
    <div>
      <Counter/>
    </div>
  );
}

export default App;

//counter.js

import React,{useState} from "react";

const Counter=()=>{
    //0에서 출발을 하고
    //+버튼을 누르면 1씩 증가함
    //-버튼을 누르면 1씩 감소함
    //count 상태
    const [count,setCount] = useState(0)
    const onIncrease = () => {
        setCount(count+1);
    };
    const onDecrease = () => {
        setCount(count-1);
    };
    return(
        <div>
            <h2>{count}</h2> 
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

import React,{useState} from "react";reactの機能を使用するには、importを使用し、その中のusStateメソッド機能(カンマで囲まれた)を使用する必要があります.
変数{count}をh 2ラベルに配置します.これはもともと0ですが、ボタンを押すたびに変更されます.
USStateというreactメソッドを返し、0インデックス(=パラメータ)と1インデックス(=パラメータ)の定数setCountを配列の非構造化割り当てで受信します.
このとき、0番目のインデックス(=パラメータ)countがステータス値として使用され、1番目のインデックス(=パラメータ)setcountがステータス変化関数として使用され、countのステータスを変更します.
userStateメソッドを呼び出すときに渡されるパラメータ0は、countという名前の状態を初期値として作成するために使用されます.
すなわち、0から=userState(0)

簡単に言えば、useStateを使用してステータスを作成する場合はcountを使用してステータスをロードするか、setCountに値を変更することができます。

JavaScriptからのクリック関数をonclick=「関数名()」のように記述します.
reactでは、onClick={関数名}はonClick関数を使用します.(キャメルケースと括弧を使います!)



画面に表示される値はリアルタイムで変更されます.
countのステータスが変わるたびに、アプリケーション.jsコンポーネントはcounterコンポーネントを呼び出し、返されたhtmlを画面に表示するので、counterというコンポーネント(=関数)は、再戻り(=画面上の新しい画像)と呼ぶことができます.
これをレンダーと呼びます.これにより、構成部品自体の状態が変化すると、レンダーのためにスクリーンが再描画されます(=関数が再呼び出されます).
リトラクトで構成部品の状態が変化すると、構成部品はリトラクトされます.
したがって、ボタンをリアルタイムで押すことで値を変更できるカウンタを作成することもできます.
これで1つのstateしか作成されませんが、カウンタ素子には2つのstateがあっても関係ありません.ただし、state名(count)とstate状態変化関数(setCount)は最終的に宣言定数(const)であるため、名前を重ねることはできない

💡Propsとは?

不変データ

propsは、学習対象の場合にいう属性(属性)の略である.
値をコンピュータに渡す最も基本的な方法

親コンポーネントから子コンポーネントにデータ(値)を渡すときに

を使用する.

読取り専用

関数に渡されるパラメータ

上記で作成したApp Complete(親)でcounter Complete(子)にcounterの初期値を0ではなくApp Completeが渡す値として使用するように要求した場合?
このときpropという概念を利用すればよい

import React from "react";
import Counter from "./counter";

const App = () => {
  return (
    <div>
      <Counter initialValue={5}/>
    </div>
  );
}

export default App;

サブコンピュータ(counter)にinitialValueと名前を付けて値を渡すことができます.

このように、親会社App社では、自分の会社counter社に名前を付けて値を渡す方式をpropと呼び、渡されたデータをpropsと呼ぶ。

import React,{useState} from "react";

const Counter=(props)=>{
    console.log(props);

    const [count,setCount] = useState(0)

    const onIncrease = () => {
        setCount(count+1);
    };
    const onDecrease = () => {
        setCount(count-1);
    };
    return(
        <div>
            <h2>{count}</h2> 
            <button  onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

値はpropによって渡され、値だけを渡すのではなく5を初期値として表示します.
counterエレメントには、親から提供されたアイテムをconst Counter=(props)=>{}パラメータで受信して使用します.console.log(props);コンソールに出力されると、この値は{initialValue: 5}オブジェクトに含まれていることがわかります.

import React from "react";
import Counter from "./counter";

const App = () => {
  return (
    <div>
      <Counter a={1} b={2} c={3} initialValue={5}/>
    </div>
  );
}

export default App;

これらのオブジェクトを追加および送信できるかどうかをコンソールで確認します.{a: 1, b: 2, c: 3, initialValue: 5}アイテムをいくつか送っても、対象に入っている値を確認できます.
次のようにコードを簡潔に書き直すことができます.

import React from "react";
import Counter from "./counter";

const App = () => {
  const counterProps ={
    a : 1,
    b : 2,
    c : 3,
    d : 4,
    initialValue : 5
  }
  return (
    <div>
      <Counter {...counterProps}/>
    </div>
  );
}

export default App;

サブアセンブリに渡すpropsをオブジェクトとして作成し、オブジェクトを展開して渡すスプレッドシート演算子{...이름명}で渡すと、サブアセンブリも同様に受信して使用できます.

import React,{useState} from "react";

const Counter=(props)=>{
    const [count,setCount] = useState(props.initialValue)

    const onIncrease = () => {
        setCount(count+1);
    };
    const onDecrease = () => {
        setCount(count-1);
    };
    return(
        <div>
            <h2>{count}</h2> 
            <button  onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

counter構成部品からpropsを取り出して書き込むには
パラメータとしてpropsを受け入れ、ポイントシンボル(props.initialValue)を使用します.
また、オブジェクトをスプレッドシート演算子として渡し、受信者もオブジェクトとして受信するため、非構造化割り当てでオブジェクトを受信することもできます(propsオブジェクトはinitialValueだけをポップアップして書き込むことができます).const Counter=({initialValue})=>{ const [count,setCount] = useState(initialValue)}
initialValueの値を書き込み、親コンポーネントの値が削除された場合、undefinedエラーが発生します.
この問題を解決するには、カウンタ構成部品を使用します.defaultProps={
defaultProps : 0
};

defaultPropsを設定すればいいです。

defaultProps機能を使用すると、エラーが発生しないように、転送されていないpropsのデフォルト値を設定できます.

🌟propsは、静的データと動的データをサブコンポーネントに伝達することができる。

//OddEvenResult.js

const OddEvenResult = ({count}) => {
    return <>{count%2===0? "짝수" : "홀수"}</>    
};

export default OddEvenResult;


//Counter.js
import React,{useState} from "react";
import OddEvenResult from "./OddEvenResult";

const Counter=(props)=>{
    const [count,setCount] = useState(props.initialValue)

    const onIncrease = () => {
        setCount(count+1);
    };
    const onDecrease = () => {
        setCount(count-1);
    };
    return(
        <div>
            <h2>{count}</h2> 
            <button  onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count}/>
        </div>
    );
};

export default Counter;

OddEvenResult.jsでstateとpropを使用して動的データを変更し続け、propsを渡すことができます.
counterの状態が変化するたびに、OddEvenResult構成部品は異なる値(偶数/奇数)をレンダリングし続け、親が解放するpropsが変化すると再レンダリングされます.そのため、李蘭徳は立ち上がった.
{count}propsを受け入れない場合は、独自にレンダリングされたサブ要素と呼ばれます.

//OddEvenResult.js

const OddEvenResult = () => {
	console.log("render");
    return <>{10%2===0? "짝수" : "홀수"}</>    
};

export default OddEvenResult;

親要素が変更された場合(=カウンタ要素の状態が変更された場合)、サブ要素も中継に続くと判断できます.

🌟レンダリングの実行時

反応素子は、状態が変化すると

によって管理されます.

私の支柱が変わったとき、

の内部親コンポーネントがマウントされている場合、子要素もマウントされます.

propsは何でも伝達できるので、素子自体も他の素子のpropsに伝達することができます.

//Container.js

const Container=({children})=>{
    return (
        <div style={{margin: 20, padding: 20, border: "1px solid gray"}}>
            {children}
        </div>
    );
};

export default Container;

//App.js
import React from "react";
import Container from "./container";
import Counter from "./counter";


const App = () => {
  return (
    <Container>
      <div>
        <Counter/>
      </div>
    </Container>
  );
}

export default App;

<Container>コンポーネントの間にJSX要素(html)をサブエレメントとして配置すると、{children}というpropとしてContainerコンポーネントに渡されます.
したがって、JSX要素(<div><Counter/></div>)は{children}に渡され、値のように使用することができる.