Flutter에서 key란 무엇이며 언제 필요한가요?

Question

Accepted Answer

Flutter의 **key**는 프레임워크가 rebuild 전반에 걸쳐 위젯을 올바르게 식별하고 보존하도록 돕습니다 — 특히 재정렬되거나 추가/제거되는 **리스트 내 stateful 위젯**에 중요합니다. key가 언제 필요한지 이해하면 미묘하고 혼란스러운 버그를 방지할 수 있습니다.

## key가 하는 일

```text
rebuild 중에 Flutter는 위치와 타입으로 새 위젯을 기존 element/state에 MATCH합니다.
보통은 잘 작동합니다. 그러나 같은 TYPE의 위젯이 리스트에서 재정렬/추가/제거되면
위치 매칭이 혼란스러워짐 → state가 잘못된 위젯에 붙음.
→ KEY는 위젯에 안정적인 IDENTITY를 부여하여 Flutter가 변경 전반에 걸쳐 올바르게 매칭.
```

## 전형적인 문제 (key 없이)

```text
STATEFUL 위젯 리스트 (예: 자체 state가 있는 항목). 첫 번째 항목을 제거:
  ✗ key 없이 → Flutter가 위치로 매칭 → state가 각 위치에 머무름, 따라서
    state가 잘못된 항목에 붙은 것처럼 보임 (state가 잘못 "이동"함)
  ✓ key 있으면 → Flutter가 key로 매칭 → state가 올바른 위젯을 따라감
→ 혼란스러운 버그 발생 (잘못된 체크박스 체크, 잘못된 항목 강조 등).
```

```dart
// 리스트 항목에 안정적인 key 부여 (예: 고유 id)
ListView(children: items.map((item) =>
  MyStatefulItem(key: ValueKey(item.id), item: item)   // 안정적 identity
).toList())
```

## key 유형과 사용 시점

```text
ValueKey → 값으로 key 지정 (예: 항목의 고유 id) — 리스트 항목에 흔함
ObjectKey → 객체의 identity로 key 지정
UniqueKey → 보장된 고유 key (빌드마다 새 identity 강제 — 주의해서 사용)
GlobalKey → 전역 고유 key; 다른 곳에서 위젯의 state/context에 접근
  (예: Form의 GlobalKey) — 강력하지만 무거움; 드물게 사용
사용 시점: 주로 동적 리스트(재정렬/추가/제거)의 STATEFUL 위젯.
  Stateless 위젯과 정적 리스트는 보통 key가 필요 없음.
```

## 왜 중요한가

key를 이해하는 것은 가치 있는 시니어 수준 지식입니다. 왜냐하면 이들이 동적 리스트의 stateful 위젯과 관련된 **미묘하고 혼란스러운 버그**를 해결하며, 언제 필요한지 아는 것이 더 깊은 Flutter 이해를 반영하기 때문입니다.

핵심 문제 — Flutter가 rebuild 중에 보통 **위치와 타입**으로 위젯을 그 state에 매칭하며, 이것이 보통은 잘 작동하지만 **같은 타입의 stateful 위젯이 리스트에서 재정렬, 추가, 제거될 때 깨진다**(state가 잘못된 위젯에 붙음)는 점 — 는 진짜 당혹스러운 버그의 원천입니다(잘못된 체크박스 체크, 잘못된 항목 강조, state가 잘못 "이동"하는 것처럼 보임). **key는 위젯에 안정적인 identity를 부여**하여 Flutter가 이러한 변경 전반에 걸쳐 올바르게 매칭하게 하고, 그런 버그를 고칩니다.

**전형적인 문제**(key 없이 stateful 위젯 리스트에서 항목을 제거하면 state가 어긋남)와 해결책(`ValueKey(item.id)` 같은 안정적인 key를 항목에 부여)을 이해하는 것은 이러한 혼란스러운 문제를 해결하는 실용 지식입니다.

**key 유형**(id 같은 값으로 key를 지정하는 ValueKey — 리스트 항목에 흔함; ObjectKey; UniqueKey; 그리고 Form의 GlobalKey처럼 다른 곳에서 위젯의 state에 접근하는 **GlobalKey**)과 결정적으로 **언제 key가 필요한지**(주로 동적 리스트의 stateful 위젯; stateless 위젯과 정적 리스트는 보통 필요 없음)를 이해하는 것은 성숙한 이해를 반영합니다 — key를 어디에나 무분별하게 적용하거나 필요한 곳에서 빠뜨리기보다 적절히 적용하는 것입니다.

key는 동적 리스트의 stateful 위젯과 관련된 실제 미묘한 버그(많은 개발자를 당혹스럽게 하는 혼란스러운 문제)를 해결하고 언제 어떻게 사용할지 이해하는 것이 더 깊은 Flutter 지식을 반영하므로, key를 이해하는 것은 가치 있는 시니어 수준 지식입니다 — 한 부류의 당혹스러운 state 버그를 해결하고 시니어 역할에 기대되는 Flutter의 위젯-element 매칭에 대한 더 깊은 이해를 반영하는, Flutter를 피상적으로만 사용하는 사람들과 진정으로 이해하는 사람들을 구별하는 주제입니다.