[TIL#3]React-Props、Stateは?

Reactを使用すると必ずデータが処理されますが、この場合の方法はPropsとStateです.
授業を始めたばかりの頃は『だから二人の違いは一体何なのか』どうして.「書いてるでしょ?」紛らわしい😅
しかし、Reactを使用する場合、これは非常に重要な概念であるため、サンプルコードで明確にまとめてみましょう.
(例コードはここで確認できます!)

Props

Propsとは、親コンポーネントが子コンポーネントにデータを渡す際に使用する概念です.このとき渡されるデータは、値であってもよいし、関数であってもよい.
上の写真に書いてある修正不可、読み取り専用の特徴です.

App.js

import React from 'react';
import PropsTest from './PropsTest';

const App = () => {
  return(
    <>
      <PropsTest name="김채원" />
    </>
  );
};

export default App;

App.jsは親コンポーネントPropsTestとして機能します.jsというサブアセンブリにname="김채원"というアイテムを渡す.このときnameをPropsの名前にすると分かりやすいです.

PropsTest.js

import React from "react";

const PropsTest = ({ name }) => {
  return <h2>{name}님 어서오세요!</h2>;
};

export default PropsTest;

PropsTest.jsは親コンポーネントAppである.jsからnameの価格を受け取り、使用中です.
出力の結果を確認すると、以下のように表示されます.

上記の例では、Propsは1つしか渡していませんが、必要に応じて設定して渡すこともできます.

State

Stateとは、素子内部に有する素子の状態値をいう.Propsとは異なり、useState()関数を使用して変更できるのが特徴です.(構成部品が関数型ではなくクラスの場合はsetState()に変更できます).

App.js

import React from 'react';
import StateTest from './StateTest';

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

export default App;

StateTest.js

import React, {useState} from 'react';

const StateTest = () => {

  const [number, setNumber] = useState(0);

  const NumberIncrease = () => {  
    setNumber(number+1);
  };

  const NumberDecrease = () => {
    setNumber(number-1);
  };

  return (
    <>
    	<h1>숫자 카운트</h1>
    	<h2>{number}</h2>
    	<button onClick={NumberIncrease}>+</button>
    	<button onClick={NumberDecrease}>-</button>
    </>
  );
};

export default StateTest;

StateTestはまた、numberという名前のStateをuseState()関数で宣言し、変更します.このときnumberの初期値は0です.NumberIncrease、NumberDecreaseの関数は、上述した状態番号の値を増加および減少させる役割を果たす.
宣言された状態を画面に出力し、関数は各ボタンに関連付けられ、結果は以下のようになります.