출처: https://www.codecademy.com

.map() 매서드

.map() 는 JSX에서 리스트를 만들 때 유용한 매서드이다.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const people = ['Rowe', 'Prevost', 'Gare'];
    
    const peopleLis = people.map((person, i) => <li key={"person_" + i}>{person}</li>);
    
    // ReactDOM.render goes here:
    ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'))

위 코드는 html에서 아래와같이 표현된다.

    <ul>
      <li>Rowe</li>
      <li>Prevost</li>
      <li>Gare</li>
    </ul>

const people = ['Rowe', 'Prevost', 'Gare']; 이 배열을

const peopleLis = people.map((person, i) => <li key={"person_" + i}>{person}</li>);

위의 .map() 함수를 이용해서 연속된 <li>(리스트)로 표현할 수 있다.

## Keys

위 예제코드에서도 <li key="~~"> 처럼 key 가 쓰이는걸 볼 수 있는데, 이는 JSX의 유니크한 요소 중 하나로 id와 비슷하다고 보면 된다.

keys는 단지 list에서 내부적으로 추적하기 위해서만 사용되어진다.

하지만 list에서 꼭 key를 사용할 필요는 없고, 아래의 경우에만 사용하면 된다.

  • The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.

  • A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.