Flutter 앱 성능 최적화

Flutter 앱 성능 최적화 

1. 앱이 느려지는 원인 분석

 불필요한 리빌드

• setState()나 상태 관리가 과도하게 build() 호출을 유발
• 동일한 위젯이 자주 다시 그려짐

 

잘못된 예 

setState(() { 
	title = 'New Title'; count++; 
}); 

// 모든 위젯이 rebuild됨

 

리스트/스크롤 성능 저하

• ListView, GridView에 너무 많은 위젯이 한 번에 그려짐
• itemBuilder 내부에서 무거운 연산 실행

 

비동기 처리 미흡

• Future 작업이 UI 쓰레드에서 블로킹
• 이미지 로딩, JSON 파싱 등을 메인 쓰레드에서 수행

 

 

2. 성능 개선 실전 팁

 2-1. 위젯 빌드 최적화

• const 사용
• const MyWidget()은 불변 → rebuild 방지
• Stateless 위젯이라도 build가 자주 일어나면 성능에 영향

 2-2. RepaintBoundary로 리빌드 범위 줄이기

• 특정 영역만 다시 그리도록 분리

RepaintBoundary( 
	child: HeavyWidget(), // 무거운 위젯 
)

 

 

2-3. ListView.builder vs ListView

• ListView.builder: 지연 렌더링, 성능 우수
• ListView: 모든 위젯을 한 번에 build → 메모리 부담

 2-4. 이미지 캐싱

• CachedNetworkImage 사용 → 네트워크 호출 최소화

2-5. 프레임 드랍 분석

• flutter run --profile
• PerformanceOverlay, DevTools → UI/GC 병목 탐지

 

 

3. 구조적으로 접근하는 리팩토링

Selector, Consumer 등으로 필요한 부분만 리빌드

 

Selector<CounterModel, int>(
  selector: (_, model) => model.count,
  builder: (_, count, __) => Text('$count'),
)

 

비동기 작업은 isolate 사용

compute(parseJson, jsonString); // 메인 쓰레드 분리

 

 

 

4. 결론

Flutter는 성능이 좋지만, 구조와 render 흐름을 이해하지 않으면 리소스를 낭비하기 쉽습니다.

최적화를 위해선 아래와 같은 루틴을 시도해보세요.

• 리빌드 범위 통제
• 비동기 작업 분리
• DevTools로 정기 점검
  이러한 루틴이 중요합니다.

상태관리 라이브러리를 사용하지 않고 최적화 방법입니다.