[ Flutter / State ] Flutter의 상태관리 훑어보기.

 

* Flutter 공식 홈페이지의 State management 를 간단하게 해석 & 정리 한 글.

 

 

 

Flutter UI의 가장 큰 특징은 다른 UI 프레임워크에서 사용하는 명령형 방식과는 다르게 선언형 UI라는 점이다.

명령형 방식의 UI 프로그래밍은 UI개체를 일일이 구성하고, 나중에 UI가 바뀌면 메서드와 setter들을 이용하여 변경하는

우리에게 익숙한 방식이다.

 

이와 반대로 Flutter는 현재의 UI 상태만 묘사하고, 변화는 프레임워크에 맡기도록 했다.

그래서 Flutter에서 UI를 어떻게 다루는지에 대해 사고 전환이 필요하다.

 

 

Flutter의 상태 소개.

- 수명이 짧은 상태 ( Ephemeral State )

- 앱 상태 ( App State )

 

 

 

1. 수명이 짧은 상태 ( Ephemeral State ) / 사용 후 삭제되는 상태 : UI State, Local State라고도 불린다.

 단일 위젯에 깔끔하게 포함할 수 있는 상태로 의도적으로 모호하게 정의했으므로 아래의 몇 가지 예를 보고 파악하면 된다.

 

- 페이지뷰(View)의 현재 페이지

- 복잡한 애니메이션의 현재 진행률.

- BottomNavigationBar의 현재 선택한 탭.

 

즉 별도의 상태 관리(Redux, Getx, ScopedModel 등)가 필요 없는 상태일 때, StatefulWidget으로만 만들면 된다.

 

class MyHomepage extends StatefulWidget {
  @override
  _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

 

_index 선언 후, onTap 이벤트 함수를 통해 _index의 값을 수정한다. _index는  MyHomepage 위젯 안에서만 변경된다.

사용자가 앱을 닫고 다시 시작하면 _index는 초기 설정 값인 0으로 재설정된다.

 

 

 

 

 

2. 앱 상태 ( App State ) / 사용 후 삭제되지 않는 상태 : Shared State라고도 불린다.

앱 상태는 사용 후 삭제되지 않고 앱의 여러 부분에서 공유하며 사용자 세션 간에 유지하려는 상태이다.

앱 상태를 사용하는 몇 가지의 예시는 아래를 참고하면 된다.

 

- 사용자 기본 설정

- 로그인 정보

- SNS 앱에서 알림(Notification)

- E-Commerce 앱에서 장바구니

- 읽음 / 읽지 않음을 처리하는 부분

 

 

 

---

 

 

> Flutter에서는 상황에 따라 어떤 state를 사용해야 하는지에 대한 명확한 규칙은 없다고 말한다.

다양한 상황에 맞게 각자 알아서 고민하고 사용하라는 뜻인 것 같다.

state를 알아보다 보니, Flutter에서  UI가 rebuild 되는 조건이나 수동 rebuild에 대해 알아보고 싶어졌다.

다음에는 Flutter UI 빌드에 대해 공부해야 봐야겠다!