상태 관리: 화면 사이에서 데이터 공유하기

상태 관리: 화면 사이에서 데이터 공유하기

플러터로 앱을 만들다 보면 어느 순간 화면과 화면 사이, 앱 전체에 걸쳐 상태를 공유해야 하는 때가 와요. 예를 들어 장바구니 앱에서 담은 상품을 다른 화면에서도 알아야 한다든가, 로그인 정보를 여러 화면이 함께 써야 하는 상황이죠. 대답은 하나가 아니라 여러 가지고, 그만큼 생각해 볼 질문도 많아요. 이 문서는 그 시작점에서 상태를 바라보는 기본 틀을 잡아 주는 페이지예요.

출처: https://docs.flutter.dev/data-and-backend/state-mgmt/intro

먼저 알아 둘 개념: 선언형 UI

플러터는 React에서 아이디어를 얻은 구조라 UI를 선언형(declarative) 으로 다뤄요. 화면을 '지금 상태가 이러니 이렇게 그려라'라고 선언하듯이 만든다는 뜻이에요. 상태가 바뀌면 UI가 직접 부분을 고치는 게 아니라, 상태에 맞춰 위젯을 다시 빌드하고 프레임워크가 이전과 달라진 부분만 화면에 반영해요.

여기서 잡고 가야 할 핵심은, 플러터에서는 화면 밖에서 위젯에 명령을 내려 '이 텍스트를 바꿔라'처럼 직접 조작하기가 어렵다는 점이에요. 위젯은 스스로의 상태를 기억하고, 상태가 변하면 스스로 다시 그려져요. 그래서 상태를 어디에 두느냐가 중요해지죠.

상태를 어디에 둘까: 임시 상태와 앱 상태

플러터에서 헷갈리기 쉬운 구분이 임시 상태(ephemeral state) 와 앱 상태(app state) 사이예요.

임시 상태는 한 위젯 안에서만 쓰이는, 가벼운 상태예요. PageView의 현재 페이지, 진행 중인 애니메이션의 진행도, BottomNavigationBar에서 선택된 탭 같은 것들이죠. 이런 상태는 위젯 트리의 다른 부분이 거의 접근할 일이 없고, 직렬화하거나 복잡하게 바꿀 필요도 없어요. 그냥 StatefulWidget 하나로 충분해요.

반면 앱 상태(공유 상태라고도 불러요)는 임시 상태가 아니에요. 여러 화면이 함께 쓰고, 사용자 세션이 바뀌어도 유지하고 싶은 상태를 말해요. 사용자 환경 설정, 로그인 정보, 소셜 앱의 알림, 쇼핑 앱의 장바구니, 뉴스 앱의 기사 읽음 여부 같은 것들이 대표적이죠. 이런 상태를 다루려면 상태 관리 방식을 고민해야 해요.

어떤 방식들을 쓸 수 있을까

플러터에는 상태를 다루는 접근 방식이 여럿 있어요. 어느 방식이든 앱의 복잡도와 팀의 선호에 따라 골라 쓰게 돼요.

  • setState — 위젯 단위의 임시 상태를 다루는 가장 낮은 수준의 방식이에요. StatefulWidget 안에서 상태가 바뀌면 setState를 불러 다시 빌드하도록 하는 구조죠.
  • ValueNotifier, InheritedNotifier — 플러터가 제공하는 API만으로 상태를 갱신하고 UI에 알리는 방식이에요.
  • InheritedWidget — 위젯 트리에서 데이터를 아래로 물려주는 저수준 메커니즘이에요. 상태 관리 패키지들이 기반으로 쓰는 개념이기도 하죠.
  • 커뮤니티 패키지 — 폭이 넓어요. provider가 가장 널리 쓰이고, 그 밖에 Redux, Riverpod, Bloc, Hooks 같은 선택지가 있어요. 처음 배우는 단계라면 특별한 이유가 없는 한 provider로 시작하는 걸 공식 문서도 추천해요.

어떤 방식을 택하든 상태를 그 상태를 쓰는 위젯들보다 위쪽에 두는 기본 원칙은 같아요. 상태가 위에 있으면 아래 위젯들이 그 상태를 물려받아 쓸 수 있기 때문이에요.

더 알아보기