React에서 key prop은 왜 필요하고 잘못 사용하면 어떤 문제가 생기나요?

key는 React가 리스트의 각 항목을 식별해 변경, 추가, 삭제를 효율적으로 비교하기 위한 값입니다. 안정적이지 않은 key를 사용하면 컴포넌트 상태가 엉뚱한 항목에 재사용되거나 불필요한 렌더링이 발생할 수 있습니다. 가능하면 데이터의 고유 id를 key로 사용해야 합니다.

핵심 개념

핵심 기준은 리스트 항목의 안정적인 식별입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

React는 렌더링 전후의 트리를 비교해 필요한 부분만 갱신합니다. 리스트에서는 항목의 순서가 바뀌거나 중간에 삽입될 수 있으므로, key가 항목의 정체성을 알려주는 기준이 됩니다.

동작 흐름

1. 배열 데이터를 map으로 렌더링합니다.
2. 각 항목에 고유하고 안정적인 key를 부여합니다.
3. React가 이전 렌더와 다음 렌더의 항목을 key 기준으로 비교합니다.
4. 변경된 항목만 갱신하고 기존 상태를 올바른 컴포넌트에 유지합니다.

실제 예시

{todos.map((todo) => (
  <TodoItem key={todo.id} todo={todo} />
))}

데이터베이스 id처럼 항목 자체에 속한 고유 값을 key로 사용하면 순서가 바뀌어도 상태가 안정적으로 유지됩니다.

실무에서 주의할 점

• 배열 index를 key로 쓰면 삽입, 삭제, 정렬 시 상태가 잘못 연결될 수 있습니다.
• Math.random()처럼 매번 바뀌는 key는 매 렌더마다 컴포넌트를 새로 만들게 합니다.
• key는 형제 리스트 안에서만 고유하면 됩니다.

함께 연결해서 보면 좋은 키워드

React, key, 렌더링, 상태관리

면접에서 짚으면 좋은 포인트

• key는 렌더링 최적화뿐 아니라 컴포넌트 상태의 정체성을 보존하는 장치라고 설명하면 좋습니다.
• index key가 항상 나쁜 것은 아니지만 정렬·삽입·삭제가 없는 정적 목록에만 제한적으로 안전합니다.

정리

한 줄로 정리하면, key는 React가 리스트 항목의 정체성을 추적하기 위한 값이며, 안정적인 고유 id를 사용하는 것이 가장 안전합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.