항목 목록을 표시하는 것은 우리가 구축 할 모든 단일 응용 프로그램에서 매우 중요합니다. JSX를 사용하여 JavaScript의 내장 Array.map() 메소드를 사용하여 목록을 표시 할 수 있습니다.

.map() 메서드는 데이터 하나를 가져 와서 다른 데이터로 변환하는 데 자주 사용됩니다. 시나리오에서는 데이터를 가져와 우리의 견해로 변환합니다.

간단한 예 

목록에 표시 할 users 목록이 있다고 가정 해 보겠습니다.

function App() {
  const people = [
    { name: 'chris' },
    { name: 'nick' }
  ];

  return (
    <div>
      {people.map(person => (
        <p>{person.name}</p>
      ))}
    </div>
  );
}

https://codepen.io/chrisoncode/pen/gVWaJB 

JSX 목록에 키 필요 

JSX에서 목록을 만들 때 React가 오류를 표시하고 key를 요청할 수 있습니다.

키는 지도 내부의 최상위 요소에 연결되어야 하는 고유 한 식별자입니다. React는 항목 추가, 업데이트 또는 삭제 여부에 관계없이 목록을 업데이트하는 방법을 알기 위해 키를 사용합니다. 이것은 React가 큰 목록과 함께하는 방법의 일부입니다. 공식 React 문서의 키를 읽으십시오.

키는 React가 목록을 효율적으로 업데이트하는 방법을 알 수 있도록 도와줍니다. 

다음과 같이 key를 사용하여 키를 추가 할 수 있습니다.

<div>
  {people.map(person => (
    <p key={person.name}>{person.name}</p>
  ))}
</div>

참고 : 키는 각 자식마다 고유해야 합니다. 

키는 각 항목마다 고유해야 합니다. 열쇠가 고유한지 확인할 수 있는 몇 가지 다른 방법을 살펴 보겠습니다.

ID를 키로 사용하기 

배열의 각 항목에 고유 한 식별자가 있으면 이를 사용할 수 있습니다. 위의 예에서 name은 각 사용자마다 고유하지만 나중에는 그렇지 않을 수 있습니다. 각 객체에 [user.id] (http://user.id)가 있으면 사용할 수 있는 것입니다.

function App() {
  const people = [
    { id: 1, name: 'chris' },
    { id: 2, name: 'nick' }
  ];

  return (
    <div>
      {people.map(person => (
        <p key={person.id}>{person.name}</p>
      ))}
    </div>
  );
}

인덱스를 키로 사용 

각 객체에 고유 한 것이 없으면 .map()에 내장 된 것을 사용할 수 있습니다. map은 우리에게 두 번째 값인 인덱스를 전달할 수 있습니다. 이 map() 내에서 고유 한 자동 증가 숫자 (0부터 시작)입니다.

function App() {
  const people = [
    { name: 'chris' },
    { name: 'nick' }
  ];

  return (
    <div>
      {people.map((person, index) => (
        <p key={index}>{person.name}</p>
      ))}
    </div>
  );
}

각 색인은 지도의 각 항목에 대해 고유하게 됩니다!

JSX의 중첩 목록 

중첩 목록의 경우지도 내에서 지도를 만들 수 있습니다. 변수를 세부적인 이름으로 지정하여 사용중인 데이터를 파악하십시오.

다음은 애완 동물이 있는 사용자 목록의 예입니다.

function App() {
  const people = [
    { 
      name: 'chris',
      pets: [
        { name: 'bella', type: 'dog' },
        { name: 'cocoa', type: 'dog' }
      ]
    },
    { 
      name: 'nick',
      pets: [
        { name: 'hilo', type: 'cat' },
        { name: 'polly', type: 'cat' }
      ]
    }
  ];

  return (
    <div>
      {people.map((person, index) => (
        <div key={index}>
          <h2>{person.name}'s Pets</h2>

          {/_ loop over the pets _/}
          <div>
            {person.pets.map((pet, i) => (
              <p key={i}>
                {pet.type} named {pet.name}
              </p>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

https://codepen.io/chrisoncode/pen/RXVrgv