Task 2. API 호출의 결과값 props 로 자식에게 전달

파일: Monsters.js

데이터를 저장한 state를 자식 컴포넌트인<CardList />에 넘겨주세요. (props 활용)

넘겨준 후 CardList.js 에서 props 를 콘솔에 찍어 확인해주세요. (개발 단계에서 확인하는 용도이니 확인 완료 후에는 콘솔을 지워주세요!)

1 api호출의 결과값인 monsters를 props 네임을 설정한 후 cardList 컴포넌트로 넘겨준다

			
<cardList monsters = {monsters} / >
  ///<cardList />는 자식컴포넌트 
  ///monsters는 작명한 변수 , {monsters}는 api호출된 결과값이 담길 state

2. 넘겨준후에는 콘솔로그 확인해본다

///props를 {monsters}로 구조분해할당 원래는 인자로 props  
function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => {
        return (
          <Card
            key={monster.id}
            id={monster.id}
            name={monster.name}
            email={monster.email}
          />
        );
      })}
    </div>
  );
}

Task 3. Array.map( ) 사용

파일: CardList.js

🚨 Array.map() 함수 사용법을 꼭 익히고 시작해주세요!

넘겨 받은 데이터를 기준으로 Array.map() 함수를 활용하여 <Card /> 컴포넌트를 리턴해주세요.

Card.js 에게 넘겨줘야하는 props 는 각 몬스터 객체의 id, name, email 입니다.

1. Array.map() 함수를 활용하여 <Card /> 컴포넌트를 리턴

function CardList({ monsters }) {
  return (
    <div className="cardList">
      {monsters.map((monster) => {
    	///하나의 요소에 리턴문 실행한 배열을 반환 (monster는 {monsters}의 각각 하나의 요소)
        return (
          <Card ///각각의 요소에 <Card /> 컴포넌트를 전달한다
            key={monster.id}
            id={monster.id}		///Card.js 에게 넘겨줘야하는props 는 각 몬스터 객체 id, name, email , 이것 또한 props
            name={monster.name}
            email={monster.email}
          />
        );
      })}
    </div>
  );
}