리스트 렌더링

map과 key로 리스트를 만든다

핵심 포인트

배열을 화면에 나열할 때는 map을 사용합니다. 배열의 항목 하나하나에 같은 모양의 JSX를 적용합니다
map으로 나열하는 가장 바깥 요소에는 모두 다른 key(이름표)를 붙입니다
key에는 id처럼 "그 항목만의 값"을 사용합니다. 배열의 번호(index)는 정렬이나 삭제로 어긋나므로 피합니다

직접 해 보기

const fruits = [
  { id: 1, name: "사과", price: 1950 },
  { id: 2, name: "바나나", price: 1300 },
  { id: 3, name: "귤", price: 1040 },
]

export default function App() {
  return (
    <ul style={{ padding: 16 }}>
      {fruits.map((fruit) => (
        <li key={fruit.id}>
          {fruit.name}: ₩{fruit.price.toLocaleString()}
        </li>
      ))}
    </ul>
  )
}

Open Sandbox

배열에 "포도"를 추가해 보세요 (화면에도 자동으로 늘어납니다)
가격이 ₩1,300 이상인 것만 표시해 보세요 (힌트: map 앞에 filter)
key={fruit.id}를 지우면 Console에 무엇이 나오는지 확인해 보세요

자주 하는 실수

key는 "가장 바깥"에 붙이기

map이 반환하는 가장 바깥 요소에 key를 붙입니다. <Link>로 <Card>를 감쌌다면 key는 <Link>에 붙입니다.

key는 모두 다른 값으로

값이 같으면(예: 모두 "1부") React가 어느 것이 어느 것인지 구별하지 못합니다. id나 slug처럼 그 항목만의 값을 사용합니다.