리스트와 key — 배열을 화면에 그리기

이 토픽을 마치면

React에서 배열을 렌더링하는 방법과, key의 역할을 이해하게 됩니다.

map으로 리스트 렌더링

배열 데이터를 화면에 보여주려면 map을 씁니다:

jsx

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() {
  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

배열의 각 요소를 JSX로 변환합니다. 그런데 key라는 특별한 prop이 있습니다.

key가 왜 필요한가

리스트에서 항목이 추가, 삭제, 재정렬될 때 React는 어떤 항목이 바뀌었는지 알아야 합니다. key는 각 항목의 고유한 신분증 역할을 합니다.

key가 없으면 React는 순서로만 비교합니다:

text

이전: [A, B, C]
이후: [X, A, B, C]

key가 없으면 React는 "1번째가 A에서 X로, 2번째가 B에서 A로, ..." 전부 바뀌었다고 판단합니다. key가 있으면 "X가 새로 추가됐다"는 것만 알아챕니다.

key의 규칙

jsx

// 고유한 ID가 있으면 — 최선
{users.map(user => (
  <UserCard key={user.id} user={user} />
))}

// 데이터에 고유값이 없으면 — 차선
{items.map(item => (
  <li key={item.name}>{item.name}</li>
))}

key는 형제 사이에서 고유해야 합니다. 데이터베이스의 ID가 가장 좋습니다.

index를 key로 쓰면 안 되는 이유

jsx

// 피하세요
{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

항목이 추가, 삭제, 재정렬되면 index가 바뀝니다. "3번"이었던 항목이 삭제 후 "2번"이 됩니다. React는 key가 같으니 같은 항목이라고 착각합니다.

결과: 입력 필드의 값이 엉뚱한 항목에 붙거나, 애니메이션이 이상하게 동작합니다.

index를 써도 되는 경우:

리스트가 고정이고 절대 바뀌지 않을 때
항목에 상태나 입력 필드가 없을 때

그 외에는 고유한 값을 key로 쓰세요.

key는 prop이 아닙니다

jsx

function UserCard({ key, user }) {
  // key는 여기서 접근할 수 없습니다!
}

key는 React 내부에서 사용하는 특수 속성입니다. 자식 컴포넌트에서 props.key로 접근할 수 없습니다. ID가 필요하면 별도 prop으로 전달하세요:

jsx

<UserCard key={user.id} userId={user.id} user={user} />

핵심

map으로 배열을 JSX로 변환하고, 각 항목에 고유한 key를 줘야 합니다. key는 React가 항목의 추가/삭제/이동을 효율적으로 감지하는 데 필요합니다. 데이터의 고유 ID를 key로 쓰세요. index는 피하세요.