Flutter Key 및 상태 관리의 기본 개념 - 성능 최적화 팁

성능 최적화 팁

올바른 Key 선택

// 리스트 아이템에 적합한 Key 사용
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return ItemWidget(
      key: ValueKey(item.id), // 고유 ID를 Key로 사용
      item: item,
    );
  },
);

 

조건부 렌더링 최적화

// 비효율적인 방법
Widget build(BuildContext context) {
  return isVisible
    ? MyWidget()
    : Container(); // 다른 타입으로 인한 Element 재생성
}

// 효율적인 방법
Widget build(BuildContext context) {
  return Visibility(
    visible: isVisible,
    child: MyWidget(), // 항상 같은 구조 유지
  );
}

 

Key 사용 가이드라인

1. 필요한 곳에만 사용: 과도한 Key 사용은 오히려 성능 저하 가능
2. 적절한 Key 타입 선택:
   • 고유 값이 있으면 ValueKey
   • 복잡한 객체면 ObjectKey
   • 강제 재생성이 필요하면 UniqueKey
   • 외부 제어가 필요하면 GlobalKey
3. 일관성 유지: 같은 위젯에는 같은 Key를 지속적으로 사용

---

핵심 정리

Key 사용의 이점

1. 성능 최적화: 불필요한 Element 재생성 방지
2. 상태 보존: 위젯 순서 변경 시에도 올바른 상태 유지
3. 메모리 효율성: Element와 RenderObject 재사용으로 메모리 절약

주요 개념 복습

1. Widget Tree: 개발자가 작성하는 UI 설계도 (불변)
2. Element Tree: Widget의 실제 구현체 (상태 유지)
3. RenderObject Tree: 실제 렌더링 담당
4. canUpdate(): 타입과 키를 비교하여 Element 재사용 결정
5. Key의 역할: 위젯을 고유하게 식별하여 올바른 Element 매칭

Flutter의 Key는 단순해 보이지만 성능과 사용자 경험에 큰 영향을 미치는 중요한 개념입니다. 올바른 Key 사용을 통해 효율적이고 안정적인 Flutter 앱을 개발할 수 있습니다.