[flutter] 불필요한 rerendering을 피하는 방법 | AutomaticKeepAliveClientMixin

state 변경되어도 rerendering 하지 않는 방법

아래 그림은 StatefulWidget의 생명주기(life cycle)이다. build 메서드는 StatefulWidget에서 화면 상에 보여줄 위젯을 그린다. build 메서드는 initState를 실행하거나, 부모 위젯에 의해 config가 업데이트 되었거나, setState로 인해 state가 변경되었을 때 실행된다.

 

 

source: https://www.developerlibs.com/2019/12/flutter-lifecycle-widgets.html

 

예를 들어 2개의 탭 위젯이 있다고 했을 때, 다른 탭으로 라우팅하면 기존에 그렸던 위젯은 dispose된다. 돌아올 때 다시 build되면서 불필요하게 rerendering하고 탭을 바꿀 때마다 깜빡거리는 현상이 발생한다.

 

라우팅될 때마다 dispose되어 발생하는 불필요한 rerendering을 막으려면 StatefulWidget을 계속 살려두어야 한다.

 

 

---

 

AutomaticKeepAliveClientMixin 클래스

State 서브 클래스에서 사용된다. AutomaticKeepAlive의 클라이언트를 위해 편리한 메서드를 제공하는 믹스인이다.
인자 타입 T는 mixed되어야할 StatefulWidget의 하위 클래스를 의미한다.

*mixin: 여러 클래스 계층에서 클래스의 코드를 재사용하는 방법. with 키워드를 사용한다.

 

 

flutter api 도큐먼트에서 있는 AutomaticKeepAliveClientMixin 에 대한 설명이다. AutomaticKeepAlive 클래스는 서브트리에 있는 위젯이 keep alive를 요청해 리렌더링을 막을 수 있게 해준다. 이를 위해서, 리렌더링을 막을 StatefulWidget 클래스의 서브클래스에서 해줘야 할 것들이 있다.

 

• wantKeepAlive 라는 메서드를 구현
• build 메서드 안에서 super.build를 호출
• 만약 wantKeepAlive의 value가 바뀐다면, 서브클래스에서 updateKeepAlive를 호출해야 함

 

// 믹스인 사용
with AutomaticKeepAlive<Page>

// wantKeepAlive: true
@override
  bool get wantKeepAlive => true;

// build 
super.build(context);

 

 

 

예시 코드

import 'package:flutter/material.dart';

class Page extends StatefulWidget {
  @override
  _PageState createState() => Page();
}

@override
  bool get wantKeepAlive => true;

class _PageState extends State<Page> with AutomaticKeepAliveClientMixin<Page> {
  int page = 1;
  String q;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Something();
  }
}

- super.build(context); : mixin에서 오는 메시지를 AutomaticKeepAlive 클래스에서 Listen할 수 있도록 build 해준다.

- with AutomaticKeepAliveClientMixin<Page> : AutomaticKeepAliveClientMixin 클래스를 mix한다. AutomaticKeepAliveClientMixin의 property나 method를 Page의 서브클래스에서 사용할 수 있게 된다.

- @override bool get wantKeepAlive => true; : 해당 클래스가 keepAlive 되길 원하므로 true를 반환한다.

 

---

references

• persistent tab example https://medium.com/@diegoveloper/flutter-persistent-tab-bars-a26220d322bc
• mixin https://dart.dev/guides/language/language-tour#adding-features-to-a-class-mixins
• flutter widget life cycle 
• indexedStack or KeepAlive stackoverflow.com/a/51738269