🟡[P2] fix(frontend): React key={index} on mutable lists causes focus loss and re-mount churn

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-R6 — React keys using array index for dynamic lists
Priority	P2 🟡
Scan Date	2026-04-16
Flagged By	@code-review

요약

• WHAT: 4개 컴포넌트가 추가/삭제 가능한 리스트에 key={index} 사용 — 중간 항목 삭제 시 모든 후속 항목의 key가 바뀌어 React 재조정 실패
• WHY: 입력 포커스 손실, 컨트롤드 인풋의 state corruption, 스트리밍 환경에서 불필요한 re-mount → 성능 저하 + UX 버그
• WHERE: 4개 파일 — ToolCalls.tsx, ArrayField.tsx, FileArrayField.tsx, ContentBlocksPreview.tsx
• SEVERITY: MEDIUM — 가시적 UX 버그 + 잠재적 데이터 손실

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/src/features/chat/components/messages/ToolCalls.tsx	23-26	toolCalls.map((tc, idx) => <ToolCallItem key={idx} ... />) — tc.id가 lin 91에서 toolCall.id.slice(0, 6)로 사용됨, 즉 stable ID 존재	@code-review	High
2	frontend/src/features/chat/components/schema-ui/fields/ArrayField.tsx	50-52	편집 가능한 array에 key={index}, 항목 제거 가능 (handleRemove line 31-37)	@code-review	High
3	frontend/src/features/chat/components/schema-ui/fields/FileArrayField.tsx	115-117	파일 리스트에 key={index}, 파일 제거 가능 (handleRemove line 133)	@code-review	High
4	frontend/src/features/chat/components/content/ContentBlocksPreview.tsx	45-47	blocks.map((block, idx) => <MultimodalPreview key={idx} ...>) — onRemove 통해 제거 가능	@code-review	High
5	(PASS 참고) ThreadSkeleton.tsx, HistorySkeleton.tsx, admin/loading.tsx	—	정적 placeholder 배열 — index key 허용	@code-review	High

영향 분석

영향 범위

• 채팅 중 tool call 스트리밍 (ToolCalls)
• Schema UI form 입력 (ArrayField, FileArrayField)
• 멀티모달 컨텐츠 미리보기 (ContentBlocksPreview)

장애 시나리오

1. 사용자가 ArrayField에 5개 항목 입력, 두 번째 입력 중
2. 첫 번째 항목 삭제
3. React 재조정: index 04 → 03, 모든 input의 key 1씩 감소
4. 입력 중이던 두 번째 항목(이제 첫 번째)의 input이 unmount/re-mount → 포커스 손실, 입력 상태 깨짐
5. 또는 ToolCalls 스트리밍 중 새 tool call 추가 시 기존 carded들이 모두 re-mount → 깜빡임 + 펼친 상태 리셋

긴급도

• 사용자가 직접 마주치는 UX 버그
• React 19 strict mode에서 더 명확히 노출 (double rendering)

제안 해결 방안

접근 방법

각 파일에서 key={idx}를 stable ID로 교체:

ToolCalls.tsx:26:

// 변경 전
{toolCalls.map((tc, idx) => <ToolCallItem key={idx} ... />)}
// 변경 후
{toolCalls.map((tc) => <ToolCallItem key={tc.id} ... />)}

ArrayField.tsx:50-52 — items에 stable ID가 없다면 추가 시 generate:

// items: Array<{ id: string; value: T }> 형태로 변경
const handleAdd = () => setItems([...items, { id: crypto.randomUUID(), value: defaultValue }]);
// render
{items.map((item) => <div key={item.id}>...</div>)}

FileArrayField.tsx, ContentBlocksPreview.tsx: 동일 패턴 적용. File 객체에는 name + lastModified 조합도 사용 가능 (충돌 가능성 낮음).

ESLint 규칙 추가:

// frontend/eslint.config.js
\"react/no-array-index-key\": \"warn\",

대안

• 무시: 단기적으로 동작하지만 React 19 concurrent rendering에서 더 자주 노출
• Map state: items를 Map<string, T>로 관리 → 큰 리팩터, 스코프 과대

수용 기준

• 4개 파일에서 key={idx} → stable ID로 교체
• ArrayField/FileArrayField에 ID 생성 로직 추가
• e2e: array field 중간 항목 삭제 → 입력 포커스 유지
• ESLint 규칙 활성화 (warn 레벨)
• 테스트 커맨드: cd frontend && pnpm lint && pnpm test

참조

• 관련 파일: 위 4개 파일
• Checklist 항목: ISS-UI-R6
• React Docs: Lists and Keys
• 관련 이슈: 없음

재현 방법

사전 조건

• dev 서버, schema-ui ArrayField가 사용되는 폼 접근 가능

단계

1. ArrayField에 항목 3개 입력 (각각 "a", "b", "c")
2. 두 번째 입력("b") 클릭 후 텍스트 추가 입력 중
3. 첫 번째 항목("a") 삭제
4. 포커스 위치 및 입력 상태 관찰

기대 결과

"b" 입력 포커스 유지, 입력 데이터 보존

실제 결과

포커스 손실, "b"가 사라지거나 다른 항목으로 이동

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/features/chat/components/messages/ToolCalls.tsx	Tool call 스트리밍 UI	수정 대상
frontend/src/features/chat/components/schema-ui/fields/ArrayField.tsx	동적 array 입력	수정 대상
frontend/src/features/chat/components/schema-ui/fields/FileArrayField.tsx	파일 리스트 입력	수정 대상
frontend/src/features/chat/components/content/ContentBlocksPreview.tsx	멀티모달 미리보기	수정 대상
frontend/eslint.config.js	ESLint 설정	규칙 추가

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-R6`