[React--Monster예제 1] 컴포넌트 재사용

fetch()를 이용해 Monsters 데이터를 불러오고 Card 컴포넌트를 재사용해보려 한다.

• 결과 화면

1.fetch() 로 데이터 가져오기

// useState에 저장
  const [monsters, setMonsters] = useState([]);
// 데이터 로딩
  useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then(setMonsters);
  }, [monsters]);

2. CardList 컴포넌트에 monsters props로 넘기기

import CardList from "./Components/CardList/CardList";
<CardList monsters={monsters} />

CardList에서는??무엇을 하느냐

👉 Array.map()으로 카드 컴포넌트 뿌려주기~!

function CardList({ monsters }) {

  return (
    <div className="cardList">
      {monsters.map((list) => {
        return (
          <Card
            key={list.id}
            id={list.id}
            name={list.name}
            email={list.email}
          />
        );
      })}
    </div>
  );
}

• props로 받은 monsters를 구조 분해 할당 문법을 이용해 인자로 넣어주었다.
• props로 받은 monsters를 map함수를이용해 뿌려준다.
  이때 개별 key값은 list의 id값으로 주었다.

그렇다면 각각 다른 img가 들어갈 Card컴포넌트는?

👉 `` 백틱을 사용해 src주소에 id값을 동적으로 추가

function Card({ id, name, email }) {

  return (
    <div className="card-container">
      <img
        src={`https://robohash.org/${id}?set=set2&size=180x180`}
        alt="monster"
      />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

• Card컴포넌트도 동일하게 구조 분해 할당 문법을 사용해 props로 받은 id,name,email을 인자로 넣어주었다.