Flutter State Management — 시작

extJo
Flutter Seoul
Published in
5 min readAug 1, 2019

Flutter를 통해서 개발을 하다보면, 중요한 요소들이 여러가지가 있지만, 특히 State를 어떻게 관리하는가가 중요한 부분이 될 수 밖에 없다.

그러면 State Management를 살펴보기전에, State가 무엇이며, StatelessWidget과 StatefulWidget의 차이와, 왜 State Management를 해야하는지 알아보자.

State는 뭔가요?

State는 Data라고 한마디로 정의 할 수 있다.

즉 Flutter로 만드는 Application에서 UI를 통해서 사용자에게 보여주는 Data, 또는 Application을 통해서 사용자와 상호작용 하면서 변화하는 Data (ex. checkbox의 check 상태, Drawer의 open 또는 close 상태 등), 또는 내부적으로만 사용하는 Data가 될 수 있다.

StatelessWidget / StatefulWidget

Flutter의 모든 UI요소들이 Widget이다. 크게 우리가 자주사용하게 될 Widget을 두 분류로 나눌 수 있는데, StatelessWidget과 StatefulWidget이다.

StatelessWidget은 보통 상태를 가지지 않는다고 표현을 하는 분들이 많지만, 사실 내부적으로 상태를 가진다. 그러면 왜 Stateless인가? 라는 물음에 StatelessWidget의 State는 Immutable 하다고 할 수 있다. 즉 변경할수없는 상태를 가지는 Widget인 것이다. 그러면 당연히도 반대인 StatefulWidget은 변경 가능한 상태를 가지는(mutable) Widget인 것이다.

그림 1) StatelessWidget 과 StatefulWidget의 lifecycle

하지만 막상 생명주기를 살펴보면..? 별 다른 형태를 가지진 않는다, 다만 다시 build를 하거나 다시 state object를 생성하는 경우가 다를 뿐이다. StatefulWidget의 실질적인 상태는 state object에서 다루게 된다.

그림 2) State<T> object의 lifecycle

state object는 위와같은 생명주기를 가지는데, 여기서 우리가 처음 Flutter를 시작할때 항상 썻던 setState가 보일 것 이다. State object가 다시 build를 하는 경우는 configuration이 바뀌었거나, 또는 setState 호출로 인해 내부적으로 상태가 변화했을 때 다시 build하게 된다. (어디서 react의 냄새가.. 킁킁)

왜 State Management를 할까?

첫번째로는 state object만 가지고 상태를 관리한다고 가정하자. 여러분들의 앱이 아주 간단한 count up, down을 하는 앱이라던지, 사칙연산이 가능한 계산기라면 사실 장황한 state management는 필요없을 것이다. 왜냐면 그냥 StatefulWidget 하나에 다 만들면 되지 않는가?

하지만, 여러분들이 만들고 싶어하거나, 최근의 Application들은 점점 더 복잡한 구조를 가지고 있다. 즉 복잡한 widget tree 구조를 가진다는 것이다. 그러면 widget tree 구조상 동떨어진 widget 끼리 통신을 필요로 한다면, 점점 더 코드는 복잡해지고, 실수 할 가능성이 많아진다.

그러면 상태관리는 아래와 같은 물음에 답을 할 수 있어야 한다.

  • Code를 Understandable, Readable, Maintainable하게 작성 할 수 있는가?
  • Testing이 가능한가?
  • 성능이 잘 나오는가?

그러면 setState만으로 여러분의 Application이 위의 조건들을 만족 할 수 있을까? 그렇기 때문에 상태관리를 위한 패키지들이 필요하다.

  • InheritedWidget & Scoped Model
  • Provider
  • BLoC & Rx
  • Redux, MobX

위의 네가지의 패키지들이 Flutter의 상태관리를 도와준다. 앞으로의 글에서는 Redux, MobX를 제외한 패키지에 대해서 알아 볼 것 이다.

그림 출처 : https://flutter.dev

다음글

--

--

extJo
Flutter Seoul

Node js, Typescript, Android, iOS, Kotlin, Dart, Flutter 😍 & Community Organizer