Props [2] - 새로 알게된 내용

그동안 props를 사용하면서 부모에서 자식으로 전달해주는 것으로 끝나는 것으로 생각했었는데 부모 컨포넌트 값을 자식 -> 손자까지도 전달해 줄수 있는 것을 새롭게 알게 되었다.

[부모 컨포넌트]

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>
  );

<CardList npcMeta={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 값을 다시 전달받아 h2태그와 두 개의 p태그에 할당하여 사용하고 있다.


조금더 이해하기 쉽게 설명하기 위해서 더 공부해야겠지만 이런 식으로 props의 데이터 값을 전달해 줄 수 있다.