🙋‍♀️ State

ステータスとは?[ダイナミック](Dynamic)の値を変更します.持続的に変化する特定の状態.状態によって、違う動作をします.
では、reactのstateにどんな意味があるか見てみましょう.
State:画面に表示する構成部品のUI情報(ステータス)
簡単に言えばstateは基本的にデータ格納の場所です.

イベントとステータスの変更👉 useState

状態変化管理のためにReactのusStateを使用することができます.React.useState() = [우리가 담으려는 data값(currentState), 값을 바꿀 수 있는 함수]ex)

const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounter(counter + 1); //직접적으로 원하는 값 설정하는 방법
        setCounter((current) => current + 1); // 위의 방법보다 좀 더 안전 (현재값이라는 걸 보장하고 있으므로) (current value에 직접 접근해서 값 설정하는 방법)
      };
      
 <button onClick = {onClick}>Click me!</button>

button要素をクリックするたびにonClick関数(イベント発生)が呼び出され、setCounterという関数を使用するたびにステータス値の初期値0からステータス値の1にステータス値が更新されます.
👉 すなわち、setCounterという名前の関数により、UIは毎日自動的に更新される.
ちなみに、componentは自分の状態が変化したときに再バインドします.

🙋‍♀️ Props

properties(プロパティ):親コンポーネントから渡されるデータを含むオブジェクト、変更しない値
アイテムで転送できるデータの種類は様々です.フリアン、関数などでもいい!
｣親コンポーネントにpropsを入れるとstring形式が「」になり、変数や関数などが{}に入れて送信されます!
propsの利点は、素子を再使用できることです.

Event & Props

propsによるイベントハンドラの転送

ex)

// 자식 Component
const Btn = (props) => {
  
  console.log(props) // {text: 'Save Changes'} {text: 'Continue'}

  return
  <button>
  {props.text} 
  </button>
}
// 부모 Component
const App = () =>{
return <>
<Btn text="Save Changes" /> 
<Btn text="Continue" /> 
</>

非構造化配分によってアイテムをより容易に得ることができる.
ex) {text, onClick} = props

const Btn({text, onClick}) => {
  
  console.log(props) // {text: 'Save Changes'} {text: 'Continue'}

  return
  <button onClick = {onClick}>
  {text} 
  </button>
}

const App = () => {
return <>
 <Btn text="Save Changes" onClick ={changeValue} />  
<Btn text="Continue" />  
</> }

注意すべき点!
onClick eventlistenerは道具じゃない!html要素にonClickを入れてこそeventlistenerになることに注意してください.必ずprop内に置いて、html要素内にも置いてください!