[리액트(React)] 리스트(List)

// 리스트, List

- 배열의 요소들을 화면에 보여준다.

- 데이터의 상호작용(동적)을 관리하기 위해 사용된다.

- map 함수를 사용하여 배열의 요소들을 리스트 항목으로 변환한다.

<ul>
    {CORE_CONCEPTS.map((conceptItem) => (
        <CoreConcept {...conceptItem} />
    ))}
</ul>

- ★각 항목에는 고유한 key가 필요하다.

// key
- 각 아이템을 구분할 수 있는 고유값(고유한 문자열)

 

<ul>
    {CORE_CONCEPTS.map((conceptItem) => (
        <CoreConcept key={conceptItem.title} {...conceptItem} />
    ))}
</ul>

---

import React from 'react';

const students = [
  {
    id: 1,
    name: 'Amy',
  },
  {
    id: 2,
    name: 'Hana',
  },
  {
    id: 3,
    name: 'sorrel',
  },
];

function Attendance(props) {
  return (
    <ul>
      {students.map((student) => (
        <li key={student.id}>{student.name}</li>
      ))}
    </ul>
  );
}

export default Attendance;