Props[2]—新規コンテンツ

この間道具を使っていたとき、親から子に伝えたと思っていた結果、親の重みが子->孫に伝わることを改めて認識しました.

[부모 컨포넌트]

function Monsters() {
  const [npcMeta, setNpcMeta] = useState([]);

  useEffect(() => {
    fetch('데이터 주소', {
      method: 'GET'
    })
      .then(response => response.json())
      .then(data => setNpcMeta(data))
  },[])

  return (
    <div className="npc">
      <CardList npcMeta={npcMeta} />
    </div>
  );

npcMetaという名前のデータは、<CardList npcMeta={npcMeta} />の対応するコードによってサブエレメントに渡され、{npcMeta}stateの値が渡される.

[자식 컨포넌트]

function CardList(props) {
  return
    <div className="cardList">
    	<Card
	    key={list.id}
	    id={list.id}
	    name={list.name}
	    email={list.email}
	    userName={list.username}
	  />
    </div>
}

propsに伝達されたnpcMeta値はcard[子孫]素子に伝達される過程でnpcmetaの각 데이터의 id, name, email, username値に伝達される.

[자손 컨포넌트]

function Card({name, email, userName}) {
  return (
    <div className="cardContainer">
      <h2>{name}</h2>
      <p>{email}</p>
      <p>{userName}</p>
    </div>
  )
}

子孫大会から受け取ったprops의 name, email, userNameの値は再転送され、h 2ラベルと2つのpラベルに割り当てられて使用される.
理解を容易にするためには,さらなる学習が必要であるが,propsのデータ値をこのように伝達することができる.