勉強する

クラス構成部品と関数構成部品の特徴とHooksの必要性を理解します.
propsの概念を一言で説明することができます.
stateの概念は一言で説明できます.
useState hookを使用してReact構成部品の状態を管理できます.
stateを使用してUIの変更を表すことができます.
イベントでstateを変更できます.
propsの概念を使用して、親要素の状態をサブ要素に反映できます.
propsの概念を利用して,子供に起こったイベントで親の状態値を変えることができる.(Stateドラッグ＆ドロップ)
まずPropsを見てガルシア
props?

properties:プロパティ

素子属性値

オブジェクト

(親コンポーネントとして渡されるデータを含む)

propsでは、すべてのJavaScript値をサブコンポーネントに渡すことができます.

propsはエレメントに付与された属性です
親->子で継承されたプロパティ.キー値でアクセスできます.
props.キー値を使用して、必要に応じて再使用できます.

import React from "react";
import Child from "./Child";

function Parent() {
    return (
    <div>
        <h1>부모 컴포넌트</h1>
        <Child  />
        
    );
    
}

export default Parent; 

Childをimportで受信し、Child素子を出力する.

import React from "react";
import Child from "./Child";

function Parent() {
    return (
    <div>
        <h1>부모 컴포넌트</h1>
        <Child name='태호' />
        <Child name='상욱' />
        <Child name='종우' />
    </div>
    );
    
}

export default Parent; 

import React from "react";


function Child(props) {
    
    return (
    <>
        <h1>자식 컴포넌트  {props.name}</h1>
    </>
    );
}

export default Child;

ということで、
親コンポーネントでは、name=""が子コンポーネントに渡されます.
サブエレメント(Child)から渡された名前をキー値としてアクセスして貼り付けた場合、操作を繰り返す必要はありません.子供一人一人に隣接する.
(propsオブジェクトのキー値を使用してアクセス)
(JavaScript関数{}を使用)
State
propsとは異なり、データが変更される場合があります.
stateは、画面に表示する構成部品のui状態です.
stateは関数の最上位にあります.
stateを設定する場合は、画面に示すように、usState関数をインポートして使用します.

import React, { useState } from 'react';

function State() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Function Component | State</h1>
    </div>
  );
}

export default State;
const [color, setColor] = useState('red');
最初のパラメータは、ステータス値を格納する変数です.
2番目のパラメータは状態値に従って変化する関数です
stateは変数をcolorに設定し、colorを更新する関数をcolorに設定し、初期値をredに設定します.