파일: Card.js
Card.js 컴포넌트
모양 및 구조
해당 이미지 처럼 나오게 컴포넌트를 구조화한다.
https://robohash.org/숫자?set=set2&size=180x180 카드마다 다른 이미지를 보여주기 위해 위 주소의 숫자 부분을 props 로 내려받은 id 로 대체해주세요.
<Card
key={monster.id} //맵 메소드를 활용하여 보내주기 떄문에 반드시 key값을 지정
id={monster.id}
name={monster.name}
email={monster.email}
/>
///id ,email , name = 넘겨 받은 인자
function Card({ id, email, name }) {
return (...)
function Card({ id, email, name }) {
return (
<div className="cardContainer">
<img
src={`https://robohash.org/${id}?set=set2&size=180x180`} ///각각의 id 값이 들어가야 그에 해당되는 이미지는 불러 들일수 있다
alt="monster"
/>
<h2>{name}</h2> //상위 컴포넌트의 name , 즉 monsters의 각각의 요소의 name 밸류
<p>{email}</p>//상위 컴포넌트의 email , 즉 monsters의 각각의 요소의 email 밸류
</div>
);
}
해당 card 컴포넌트는 상위 컴포넌트인 cardList컴포넌트에서 map()메소드 안에서 리턴 되어져있으니 card 컴포넌트는 {mosters}요소 만큼 반복한다.
그리고 각 card는 각 요소 ({monsters})의 id, name ,email의 값을 가진다
이 흐름이 아무리 연습해도 어렵다....