핵심 요약 (불릿)
- key는 리스트 렌더링 시 각 요소의 고유 식별자
- React의 재조정(Reconciliation) 성능에 직접적인 영향
- index를 key로 쓰면 버그와 불필요한 리렌더링 발생 가능
- 데이터의 고유 id를 사용하는 것이 가장 안전함
실제 면접 답변 예시 (문장형)
“key는 React가 리스트 형태의 컴포넌트를 효율적으로 비교하고 업데이트하기 위해 사용하는 고유 식별자입니다. key가 정확해야 변경된 요소만 최소한으로 다시 렌더링할 수 있습니다. 만약 index를 key로 사용하면 요소의 순서가 바뀌는 경우 잘못된 컴포넌트가 재사용되어 입력값이 꼬이거나 상태가 섞이는 버그가 발생할 수 있습니다. 그래서 실무에서는 가능한 한 데이터 자체가 가진 고유한 id를 key로 사용하는 것이 가장 안전합니다.”
실무 팁 & 주의점
- 서버에서 내려오는 id 값이 있다면 반드시 key로 사용하세요.
- 정렬, 추가, 삭제가 발생하는 리스트에서는 index key 사용을 피해야 합니다.
- key는 화면에 보이지 않지만, React 성능과 안정성에 매우 큰 영향을 줍니다.