map을 이용해서 배열을 엘리먼트 리스트로 만든다.

map은 새 배열을 반환한다. map을 사용해서 새배열에 엘리먼트를 가진 배열을 반환하고 이 배열로 list를 만들어준다.

사용법

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>    <li>{number}</li>  );  return (
    <ul>{listItems}</ul>  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

key

key를 넣는 이유는 랜더링때 리스트를 비교할때 키를 넣어 준다면 재사용을 하게된다. 이때 인덱스로 키를 지정하면 상태 리스트가 예상과 다르게 만들어 질수 있다. 그래서 인덱스를 넣지 않는게 좋다.

key는 형제들 사이에서 고유해야하고
key를 넣지 않으면 동작은 하지만 key를 인덱스로 자동으로 사용한다.
key는 props로 전달되지 않는다.

이 방식을 사용하면 코드가 더 깔끔해 지지만, 이 방식을 남발하는 것은 좋지 않습니다. JavaScript와 마찬가지로 가독성을 위해 변수로 추출해야 할지 아니면 인라인으로 넣을지는 개발자가 직접 판단해야 합니다. map()함수가 너무 중첩된다면 컴포넌트로 추출 하는 것이 좋습니다.