[Flutter] 플러터 성능향상을 위한 `RepaintBoundary` 위젯 사용하기

플러터에서 작동할 때에 다른 변경되지 않은 위젯까지 재렌더링을 하는 경우가 생길 수 있습니다. 예로 들면, 여러 위젯 안에 하나의 위젯에 데이터만 변경(렌더링)되기만 하면 되는데 그 위젯을 변경하기 위해 관련된 부모, 친구 위젯까지 모두 재렌더링이 발생할 수 있는 것이죠.

플러터로 개발을 하다 보면, const를 붙이게 되면 암묵적으로 렌더링에서 다시 그리지 않습니다. 비슷한 유형이라고 보시면 될 것 같습니다.

 

언제 사용해야할까?

해당 위젯이 복잡한 레이아웃과 그래픽(애니메이션)등이 포함되어 있어 렌더링 비용이 많이 들것이라고 예상이 된다면, `RepaintBoundary`를 사용하여 렌더링 성능을 최적화할 수 있습니다.

`RepaintBoundary`를 사용하게 되면, 수치는 낮지만 일부분의 CPU와 메모리 영역을 사용하게 됩니다. 즉, 모든 위젯에 감싸는 것은 오히려 CPU, 메모리를 사용하게 되기 때문에 특정 복잡한 위젯에서만 사용하는 것을 추천합니다.

 

예제

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RepaintBoundary(
            child: MyExpensiveToPaintWidget(),
          ),
        ),
      ),
    );
  }
}

class MyExpensiveToPaintWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // This widget is expensive to paint because it contains a lot of complex
    // layout and graphics.
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text('Expensive to paint'),
    );
  }
}

 

참고 링크

Flutter - Using RepaintBoundary Examples