반복문 배열 데이터 입력 및 화살표 함수

function App() {
  //자바스크립트는 여기에 작성함
  const pets = [
    { name: "줄리아", species: "cat", age: "5", id: 123456789 },
    { name: "라이언", species: "dog", age: "3", id: 987654321 },
    { name: "플로피", species: "rabbit", age: "2", id: 123123123 },
    { name: "길동", species: "cat", age: "1", id: 456456456 },
    { name: "진도", species: "dog", age: "6", id: 789789789 },
  ];

  return (
    <div>
      <OurHeader />
      <TimeArea />
      <ul>
        {pets.map(function (pet) {
          return <Pet name={pet.name} species={pet.species} age={pet.age} />;
        })}
      </ul>
      <Footer cr="부산IT교육센터" />
    </div>
  );
}

 

 

map 은 반복할 때 리턴 되는 값이 있음

컴포넌트로 리턴

 

 

 

화면에 출력은 잘 되나,

 

f12로 확인하면 아래의 .Warning이 뜸 

 

key 값이 필요함 

id를 키 값으로 넣어줌

 

 

깨끗.

 

 

 

 

화살표 함수로 바꿔봄

return 생략 

 

 

 

1. 매개변수 없는  함수

 

 

2. 매개변수 있는 함수