배열을 요소 목록으로 바꾸고 항목 정체성을 보존합니다.
map은 데이터 배열을 JSX 배열로 변환합니다. key는 추가·삭제·정렬 때 기존 컴포넌트 상태를 올바른 데이터와 연결합니다.
DB id처럼 형제 사이에서 안정적이고 고유한 값을 key로 사용합니다.
정렬 가능한 목록에서 index key를 쓰면 입력과 포커스가 다른 행에 붙을 수 있습니다.
Math.random으로 key를 만들면 매번 모든 항목이 새 컴포넌트로 교체됩니다.
로컬 프로젝트에서 확인해보세요세 번째 강좌를 추가하고 hours 순으로 정렬하세요.
const courses = [
{ id: "react", title: "React", hours: 24 },
{ id: "vue", title: "Vue", hours: 20 },
];
export default function App() {
return (
<main>
<ul>
{courses.map((course) => (
<li key={course.id}>
<b>{course.title}</b> {course.hours}시간
</li>
))}
</ul>
</main>
);
}