[Flutter] 기본 상태 관리 (State Management)

Flutter에서 상태 관리는 UI가 변화하는 데이터를 효과적으로 유지하고 반영하는 방법이다. 상태 관리가 중요한 이유는 Flutter의 선언적 UI 방식 때문이다. 즉, UI는 상태(state)에 따라 변경되므로 이를 어떻게 다루느냐에 따라 앱의 구조와 유지보수성이 달라진다.

여기서는 Flutter의 기본 상태 관리 방법에 대해 설명한다. 서드파티 라이브러리(Provider, Riverpod 등)를 사용하지 않고 Flutter에서 제공하는 방법만 다룬다.

1. 상태(State)란?

Flutter에서 상태란 앱의 UI를 결정하는 데이터이다. 상태는 크게 두 가지로 나뉜다:

1. Ephemeral state (단기 상태): 특정 위젯 내에서만 관리되는 상태 (예: TextField 입력값, 버튼 클릭 여부 등)
2. App state (앱 전역 상태): 여러 위젯이 공유하는 상태 (예: 사용자 인증 정보, 테마 설정 등)

 

2. StatefulWidget을 활용한 상태 관리

가장 기본이고 간단한 상태 관리 방법은 StatefulWidget을 이용하는 것이다.

StatefulWidget은 내부적으로 State 객체를 가지며, setState() 메서드를 사용하여 상태를 변경할 수 있다. setState()가 호출되면, build() 메서드가 다시 실행되어 UI가 변경된 상태를 반영하게 된다.

StatefulWidget의 특징

• 자체적으로 상태를 관리할 수 있다.
• UI 변경이 필요할 때 setState()를 호출하여 상태를 갱신한다.
• 상태는 State 객체 안에서 유지되며, 위젯이 제거될 때 함께 사라진다.
• 앱의 일부분에서만 필요한 상태(단기 상태, ephemeral state)에 적합하다.

이러한 특성 때문에 StatefulWidget은 단순한 UI 요소에서 상태를 관리할 때 적절한 선택이 된다. 하지만 여러 위젯 간에 상태를 공유해야 하는 경우에는 다른 방법을 고려해야 한다.

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0; // 상태 변수 선언

  void increment() {
    setState(() { // 상태 변경 시 UI 업데이트
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        TextButton(
          onPressed: increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

 

 

1. StatefulWidget은 위젯이 상태를 보관할 수 있도록 State 객체를 생성한다.
2. setState()를 호출하면 Flutter가 build()를 다시 실행하여 UI를 업데이트한다.
3. 상태는 위젯이 화면에서 사라지면 함께 제거된다.

📌 언제 사용할까?

• 특정 위젯에서만 필요한 상태
• 외부 위젯과 공유할 필요가 없는 데이터

 

3. 위젯 간 상태 공유 방법

위젯 간 상태를 공유해야 할 경우, StatefulWidget만으로는 한계가 있다. Flutter에서는 위젯 트리를 통해 데이터를 전달하는 방법을 제공한다.

3.1 생성자(Constructor)로 상태 전달

위젯 간 데이터를 전달하는 가장 간단한 방법은 생성자를 통해 전달하는 것이다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ParentWidget(),
    );
  }
}

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int count = 0; // 상태 변수 선언

  void increment() {
    setState(() { // 상태 변경 시 UI 업데이트
      count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("StatefulWidget 상태 관리")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $count', style: TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: increment,
              child: const Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 언제 사용할까?

• 부모에서 자식 위젯으로 데이터를 전달할 때
• 한두 개의 위젯만 상태를 공유할 경우

 

3.2 InheritedWidget을 활용한 상태 공유

InheritedWidget을 사용하면 부모 위젯에서 하위 위젯으로 데이터를 전달할 때, 직접적인 생성자 전달 없이도 상태를 공유할 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // 앱 실행
}

// 최상위 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterState( // CounterState를 감싸서 상태를 공유할 수 있도록 설정
        count: 0, // 초기 count 값 0
        child: const CounterScreen(), // 하위 위젯으로 전달
      ),
    );
  }

// 상태를 저장하는 InheritedWidget
class CounterState extends InheritedWidget {
  final int count; // 공유할 상태 변수

  // 생성자에서 count 값을 전달받아 저장
  const CounterState({super.key, required this.count, required super.child});

  // 하위 위젯이 CounterState에 접근하는 메서드
  static CounterState of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CounterState>()!;
  }

  // count 값이 변경되었을 때 UI를 다시 빌드할지 결정하는 메서드
  @override
  bool updateShouldNotify(CounterState oldWidget) => count != oldWidget.count;
}

// UI를 표시하는 CounterScreen
class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    int count = CounterState.of(context).count; // InheritedWidget에서 count 값 가져오기

    return Scaffold(
      appBar: AppBar(title: const Text("InheritedWidget 상태 공유")),
      body: Center(
        child: Text(
          'Count: $count', // count 값을 UI에 표시
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

📌 언제 사용할까?

• 여러 위젯에서 동일한 상태를 사용해야 할 때
• 부모 위젯을 거치지 않고 하위 위젯에서 데이터를 가져와야 할 때
• 성능 최적화를 위해 필요할 때 (자주 변경되지 않는 상태에 적합)

 

4. Listenable을 활용한 상태 관리

Flutter에서는 UI가 상태(state) 변경을 감지하고 자동으로 업데이트되도록 Listenable을 사용할 수 있다.
Listenable은 여러 위젯이 동일한 상태를 감지하고, 상태 변경이 발생하면 UI를 자동으로 갱신할 수 있도록 한다.

Listenable은 Flutter에서 상태 변경을 감지하는 기본적인 인터페이스다.
여러 위젯이 동일한 상태를 참조하고 있다가 상태가 변경되면 UI를 자동으로 다시 빌드할 수 있다.

4.1. ChangeNotifier

ChangeNotifier는 상태 변경이 발생할 때 notifyListeners()를 호출하여 UI를 자동으로 갱신하도록 하는 클래스이다.

1. CounterNotifier 클래스가 ChangeNotifier를 상속하여 count 상태를 관리.
2. increment() 함수에서 count 값을 변경하고 notifyListeners()를 호출하여 변경 사항을 UI에 반영.
3. ListenableBuilder를 사용하여 상태 변경 시 build()가 다시 실행됨.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// 앱의 루트 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierExample(), // ChangeNotifier 예제 실행
    );
  }
}

// ChangeNotifier를 상속받아 상태 관리
class CounterNotifier extends ChangeNotifier {
  int _count = 0; // 상태 변수

  int get count => _count; // count 값을 외부에서 읽을 수 있도록 getter 제공

  void increment() {
    _count++; // 상태 값 변경
    notifyListeners(); // UI 업데이트를 위해 모든 리스너에게 변경 알림
  }
}

class ChangeNotifierExample extends StatefulWidget {
  const ChangeNotifierExample({super.key});

  @override
  _ChangeNotifierExampleState createState() => _ChangeNotifierExampleState();
}

class _ChangeNotifierExampleState extends State<ChangeNotifierExample> {
  final CounterNotifier counterNotifier = CounterNotifier(); // ChangeNotifier 인스턴스 생성

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ChangeNotifier 상태 관리")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // ListenableBuilder를 사용하여 상태 변경 감지
          ListenableBuilder(
            listenable: counterNotifier, // listenable에 counterNotifier 등록
            builder: (context, child) {
              return Text(
                'Counter: ${counterNotifier.count}', // 상태 값 표시
                style: TextStyle(fontSize: 24),
              );
            },
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: counterNotifier.increment, // 버튼 클릭 시 상태 변경
            child: const Text('Increment'),
          ),
        ],
      ),
    );
  }
}

 

4.2. ValueNotifier

ValueNotifier는 ChangeNotifier보다 더 가벼운 상태 관리 방법이다.

단 하나의 값만 관리할 때 적합하며, notifyListeners() 없이도 UI가 자동으로 업데이트된다.

1. ValueNotifier<int> 타입의 counterNotifier 객체 생성.
2. counterNotifier.value++을 사용하여 상태 값을 변경하면 자동으로 UI가 업데이트됨.
3. ValueListenableBuilder를 사용하여 상태가 변경될 때만 다시 빌드.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// 앱의 루트 위젯
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ValueNotifierExample(), // ValueNotifier 예제 실행
    );
  }
}

class ValueNotifierExample extends StatefulWidget {
  const ValueNotifierExample({super.key});

  @override
  _ValueNotifierExampleState createState() => _ValueNotifierExampleState();
}

class _ValueNotifierExampleState extends State<ValueNotifierExample> {
  final ValueNotifier<int> counterNotifier = ValueNotifier(0); // ValueNotifier 선언

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ValueNotifier 상태 관리")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // ValueListenableBuilder를 사용하여 상태 변경 감지
          ValueListenableBuilder<int>(
            valueListenable: counterNotifier, // counterNotifier의 변경을 감지
            builder: (context, value, child) {
              return Text(
                'Counter: $value', // 현재 상태 값 표시
                style: TextStyle(fontSize: 24),
              );
            },
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              counterNotifier.value++; // 상태 값을 변경하면 자동으로 UI 업데이트
            },
            child: const Text('Increment'),
          ),
        ],
      ),
    );
  }
}

 

5. MVVM 아키텍처 적용

MVVM(Model-View-ViewModel) 패턴이란?

MVVM 패턴은 Flutter와 같은 리액티브 프레임워크에서 효과적으로 상태를 관리하는 아키텍처 패턴이다. 이 패턴은 앱의 UI(View)와 데이터(Model)를 직접 연결하지 않고, ViewModel이 중간 역할을 하도록 분리하여 코드의 유지보수성을 높인다.

MVVM의 구성 요소

1. Model (모델)
   • 앱의 데이터와 로직을 담당하는 계층.
   • HTTP 요청, 데이터베이스 접근, 로컬 저장소 등의 작업을 수행.
   • Flutter의 UI 관련 코드가 포함되지 않음 → dart:ui와 독립적임.
2. ViewModel (뷰모델)
   • Model과 View 사이에서 데이터 흐름을 관리하는 계층.
   • ChangeNotifier를 상속하여 상태가 변경될 때 UI에 알림.
   • 데이터 변환, 로딩 상태 관리, 에러 핸들링 등의 역할 수행.
3. View (뷰)
   • UI 요소를 담당하는 계층.
   • ViewModel의 데이터를 구독하여 UI를 업데이트함.
   • UI와 로직을 분리하여 유지보수성을 높임.

3.1. Model 정의

Model은 앱의 데이터 로직을 처리하는 역할을 한다. 예제에서는 CounterModel이 서버에서 데이터를 가져오고 업데이트하는 역할을 수행한다.

import 'package:http/http.dart';

class CounterData {
  CounterData(this.count);
  final int count;
}

class CounterModel {
  Future<CounterData> loadCountFromServer() async {
    final uri = Uri.parse('https://myfluttercounterapp.net/count');
    final response = await get(uri);

    if (response.statusCode != 200) {
      throw ('Failed to fetch data');
    }
    return CounterData(int.parse(response.body));
  }

  Future<CounterData> updateCountOnServer(int newCount) async {
    // 서버로 newCount 전송하는 코드 작성 필요
  }
}

✔ Model의 특징

• HTTP 요청을 통해 서버에서 데이터를 가져오거나 변경함.
• Flutter 프레임워크와 독립적으로 동작함 (테스트 용이).
• ViewModel이 직접 데이터를 접근하지 않고 Model을 통해 관리함.

 

3.2. ViewModel 정의

ViewModel은 Model의 데이터를 관리하고 UI(View)에서 사용할 수 있도록 제공하는 역할을 한다.

import 'package:flutter/foundation.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel model;
  int? count;
  String? errorMessage;

  CounterViewModel(this.model);

  Future<void> init() async {
    try {
      count = (await model.loadCountFromServer()).count;
    } catch (e) {
      errorMessage = 'Failed to load data';
    }
    notifyListeners();
  }

  Future<void> increment() async {
    var currentCount = count;
    if (currentCount == null) {
      throw ('Not initialized');
    }
    try {
      await model.updateCountOnServer(currentCount + 1);
      count++;
    } catch (e) {
      errorMessage = 'Failed to update count';
    }
    notifyListeners();
  }
}

✔ ViewModel의 특징

• ChangeNotifier를 상속하여 상태 변경 시 UI를 업데이트함.
• Model과 View를 분리하여 UI 로직과 데이터 처리를 분리함.
• 서버에서 데이터를 가져오고, 상태를 변경하는 역할을 수행함.

 

3.3. View 정의

View는 UI를 담당하며, ViewModel의 데이터를 구독하여 자동으로 UI를 업데이트한다.

ListenableBuilder(
  listenable: viewModel,
  builder: (context, child) {
    return Column(
      children: [
        if (viewModel.errorMessage != null)
          Text(
            'Error: ${viewModel.errorMessage}',
            style: TextStyle(color: Colors.red),
          ),
        Text('Count: ${viewModel.count}'),
        TextButton(
          onPressed: viewModel.increment,
          child: Text('Increment'),
        ),
      ],
    );
  },
)

✔ View의 특징

• ViewModel의 데이터를 구독하여 UI를 업데이트함.
• ListenableBuilder를 사용하여 상태가 변경될 때 UI를 자동으로 갱신함.
• UI 로직을 최소화하여 유지보수성을 높임.

MVVM 패턴을 사용하면 UI(View)와 데이터(Model)를 분리하여 코드의 유지보수성과 확장성을 높일 수 있다.
Flutter에서 상태 관리를 체계적으로 하고 싶다면 MVVM 패턴을 도입하는 것이 좋은 선택이 될 수 있다.