유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Master .select in Riverpod | Flutter Riverpod State Management

Coding With T

2025. 8. 29.

0

#frontend
#mobile app
  • Riverpod의 .select 기능을 사용하여 UI 리빌드 횟수를 줄이는 방법을 설명 🔄
  • 많은 항목이 있는 목록에서 특정 항목만 변경할 때 전체 목록이 아닌 해당 항목만 업데이트하는 것이 목표 🎯
  • stateProvider를 사용하여 간단한 To-Do 모델을 생성하고, select를 통해 특정 속성(예: completed)의 변경만 감지하도록 설정 📌
  • ref.watch 대신 ref.watch(provider.select((item) => item.completed))를 사용하여 completed 속성이 변경될 때만 UI를 업데이트 👁️
  • t.copywith를 사용하여 불변성을 유지하면서 특정 속성만 변경하고, 변경된 To-Do 모델로 상태를 업데이트 📝
  • read를 사용하여 한 번만 값을 읽어오고, 변경 사항을 감지하지 않도록 설정 (예: 제목) 📖
  • to-do 목록 예제에서 .select를 사용하지 않으면 목록의 모든 항목이 리빌드되지만, .select를 사용하면 변경된 항목만 리빌드됨 ⚡
  • 목록의 길이를 감지하기 위해 별도의 provider를 생성하여 항목이 추가되거나 제거될 때 UI를 업데이트 📏
  • .select를 사용하여 특정 to-do 항목의 completed 값만 감지하고, 해당 값이 변경될 때만 UI를 업데이트 🚦
  • .select를 사용하면 UI 성능을 최적화하고 불필요한 리빌드를 줄일 수 있음 ✅

Recommanded Videos