map

map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

<li> 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장

 

 

 

왜 key를 넣어야 하는가?

key는 react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움.

엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야함.

 

가장좋은방법!

리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열 사용

대부분의 경우 데이터ID를 KEY로 사용