React 컴포넌트에서 key prop이 중요한 이유는 무엇인가요?

key는 React가 리스트 항목의 정체성을 구분하는 기준입니다. 안정적인 key가 있어야 항목 추가, 삭제, 재정렬 시 기존 DOM과 컴포넌트 상태를 올바르게 재사용할 수 있습니다. index를 key로 쓰면 순서가 바뀌는 목록에서 잘못된 상태가 다른 항목에 붙을 수 있습니다.

핵심 개념

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

리스트가 변경될 때 React가 어떤 항목을 같은 항목으로 판단하는지 떠올려보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

할 일 목록에서 서버가 내려준 todo.id를 key로 쓰면 중간 항목을 삭제해도 각 입력 상태가 올바른 항목에 유지됩니다.

실무에서 적용하는 방법

가능하면 데이터의 고유 id를 key로 사용하고, 정렬·필터·삽입이 있는 목록에서는 index key를 피합니다.

실무에서 주의할 점

• 매 렌더링마다 Math.random()으로 key를 만들면 모든 항목이 새로 마운트됩니다.
• key는 형제 목록 안에서만 유일하면 됩니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

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

React, key, 리스트, 렌더링

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

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, key는 React가 리스트 항목의 정체성을 구분하는 기준입니다. 안정적인 key가 있어야 항목 추가, 삭제, 재정렬 시 기존 DOM과 컴포넌트 상태를 올바르게 재사용할 수 있습니다. index를 key로 쓰면 순서가 바뀌는 목록에서 잘못된 상태가 다른 항목에 붙을 수 있습니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.