Flutter State Restoration: 상태 복원 기능 제대로 이해하기

Flutter 앱을 만들다 보면 사용자의 인터랙션이 앱을 잠깐 떠났다가 다시 돌아오는 상황에서도 이전 상태가 그대로 복원되길 바랄 때가 많습니다. 이때 필요한 것이 바로 State Restoration 기능입니다.

이번 글에서는 Flutter의 상태 복원(State Restoration) 기능이 무엇인지, 왜 중요한지, 그리고 어떻게 사용하는지를 간단하고 명확하게 정리해봅니다.

State Restoration이란?

앱이 종료되지 않은 상황에서 시스템이 프로세스를 일시적으로 제거했다가 복원할 때, UI 상태를 다시 복구해주는 기능입니다.

예를 들어,

• 사용자가 앱을 사용하던 중 다른 앱으로 전환하거나
• 백그라운드에서 오래 머무르다 시스템이 리소스를 회수해 앱을 종료했다가 다시 실행될 경우

→ 사용자가 이전에 보던 화면 그대로 다시 돌아오게 하는 것이 State Restoration입니다.

이는 Hot Restart와는 다릅니다. Hot Restart는 개발 도중 수동으로 앱을 다시 시작하는 경우이고, State Restoration은 운영 환경에서 사용자 경험 유지를 위한 자동 복원 기능입니다.

어떻게 동작할까?

Flutter에서 State Restoration을 구현하려면 다음 세 가지를 기억하세요.

1️⃣ restorationScopeId 설정

MaterialApp(
  restorationScopeId: 'root',
  ...
)

앱 전역에 복원 기능을 활성화하려면 MaterialApp 또는 CupertinoApp 위젯에 restorationScopeId를 지정해야 합니다.

2️⃣ 상태 저장이 필요한 위젯에 RestorationMixin 적용

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with RestorationMixin {
  final RestorableInt _counter = RestorableInt(0);

  @override
  String get restorationId => 'home_page';

  @override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(_counter, 'counter');
  }

  @override
  void dispose() {
    _counter.dispose();
    super.dispose();
  }

  void _incrementCounter() {
    setState(() {
      _counter.value++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('State Restoration 예제')),
      body: Center(
        child: Text('카운터: ${_counter.value}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

여기서 핵심은 다음과 같습니다:

• RestorationMixin을 통해 복원 기능을 적용
• restorationId로 상태의 고유 식별자 설정
• restoreState() 내부에서 복원할 상태 등록

🧠 Restorable 값의 종류

Flutter는 다양한 RestorableXxx 클래스를 제공합니다.

필요에 따라 커스텀 Restorable 객체도 만들 수 있습니다.

복원된 상태는 어디에 저장되나요?

Flutter는 플랫폼별로 상태 저장소를 관리합니다. 예를 들어, Android의 경우 시스템 레벨에서 앱 프로세스의 상태를 백업하고 복원하는 방식으로 동작합니다.

즉, Flutter는 내부적으로 Android의 SavedInstanceState와 같은 메커니즘을 활용하여 복원 데이터를 보존합니다.

⚠️ 주의할 점

• Hot Reload는 상태 복원 기능을 테스트할 수 없습니다. Hot Restart 또는 실제 앱 실행 환경에서 테스트하세요.
• 모든 상태가 자동 복원되는 건 아닙니다. 직접 등록한 상태만 복원됩니다.
• Navigator를 사용할 경우 RestorablePush()나 RestorableRouteFuture 등 별도 구현이 필요합니다.

마무리하며

Flutter에서 사용자 경험을 보다 자연스럽게 만들고 싶다면, State Restoration 기능은 필수입니다. 특히 멀티태스킹이 일상화된 모바일 환경에서는 상태 복원 유무가 앱의 완성도를 좌우할 수도 있습니다.

작은 앱이라도 카운터 같은 단순한 상태부터 시작해보세요. 앱이 커질수록 이 기능의 중요성이 더 크게 느껴질 것입니다.

TI Tech Lab 신유림 연구원

Source

• https://www.flutteris.com/blog/fr/state_restoration