React - 몬스터과제 4단계

정재성·2022년 5월 21일
0
post-thumbnail

Task 4. props 활용

  • 파일: Card.js

  • Card.js 컴포넌트 모양 및 구조

해당 이미지 처럼 나오게 컴포넌트를 구조화한다.

  • 이미지 주소 (src)

https://robohash.org/숫자?set=set2&size=180x180 카드마다 다른 이미지를 보여주기 위해 위 주소의 숫자 부분을 props 로 내려받은 id 로 대체해주세요.

1.cardList 컴포넌트 안에 Card 컴포넌트에 넘겨줄 값을 설정


 <Card
           key={monster.id} //맵 메소드를 활용하여 보내주기 떄문에 반드시 key값을 지정 
           id={monster.id}
           name={monster.name}
           email={monster.email}
         />
      

2.Card 컴포넌트에서 props로 받아야하는 데이터는 id, name, email!

///id ,email , name = 넘겨 받은 인자
function Card({ id, email, name }) {
  return (...)

3.컴포넌트 구조

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의 값을 가진다
이 흐름이 아무리 연습해도 어렵다....

profile
기술블로그 / 일상블로그

0개의 댓글