AI 요약관련 정보

• React에서 목록 렌더링 시 배열 인덱스를 key로 사용하는 것은 흔하지만, 심각한 문제를 야기하는 안티패턴입니다. 🚫
• 고유 ID가 없는 경우, 중복된 항목을 key로 사용하면 React 오류가 발생하므로, map 메서드가 제공하는 고유한 index를 대신 사용하게 됩니다. 🔢
• index는 항목의 고유한 "정체성"이 아닌 "위치"를 나타내므로, 목록의 순서가 변경(추가, 삭제, 정렬)될 때 React가 잘못된 항목을 추적하여 UI와 데이터 불일치를 초래합니다. 📍
• 목록 맨 앞에 새 항목을 추가하면 기존 항목들의 인덱스가 밀려나고, React는 기존 인덱스에 해당하는 컴포넌트를 재사용하여 입력 필드 값 등이 엉뚱하게 표시됩니다. ⬆️
• 목록을 정렬하면 항목의 위치가 바뀌지만, React는 인덱스를 기준으로 컴포넌트를 재사용하므로, UI의 입력 값은 그대로 유지되고 실제 데이터만 정렬되어 UI가 잘못된 데이터를 보여줍니다. 🔄
• index를 key로 안전하게 사용할 수 있는 경우는 다음과 같습니다: 항목에 고유 ID가 없고, 목록이 완전히 정적이며, 재정렬되거나 필터링되지 않을 때 (예: 변경되지 않는 내비게이션 메뉴). 🛡️
• 목록에서 데이터가 튀거나, 입력 필드 초점이 사라지거나, 애니메이션이 깨지는 등 이상한 동작이 발생하면, key 사용 방식을 먼저 확인하세요. 🐛