[Flutter] 상태관리 패키지(provider) 사용법

provider 패키지를 설명하기에 앞서, Flutter의 두가지 위젯에 대해 먼저 알아야한다.

Flutter의 위젯은 크게 StatelessWidget과 StatefulWidget으로 나눌 수 있다.

 

StatelessWidget은 상태 변화가 없기 때문에 화면을 새로고침 할 필요가 없다. 즉, build 함수를 한번만 호출하면 된다.

반면 StatefulWidget은 상태 변화가 있기 때문에 화면을 새로고침 해야한다. 즉, build 함수를 여러번 호출해야 한다.

 

StatelessWidget과 StatefulWidget의 기본 구조는 아래와 같다.

//StatelessWidget 기본 구조
class MyApp extends StatelessWidget {
    MyApp(); //생성자
    @override
    Widget build(BuildContext context) {
        return Text("hello");
    }
} ...

//StatefulWidget 기본 구조
class MyApp extends StatefulWidget {
    MyApp(); //생성자
    @override
    State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
        return Text("hello");
    }
} ...

 

StatefulWidget에서 화면을 갱신(build 함수 재호출)하려면 setState를 사용해야한다.

그러나 setState는 같은 클래스 내에서만 사용이 가능하다는 한계가 있다.

이런 한계를 해결하기 위한 방법이 상태관리(State Management) 패키지를 사용하는 것이다.

*상태관리란? 최신 상태의 데이터를 보여주도록 페이지 간 데이터를 주고받고 관리하는 행위

 

대부분의 상태관리 패키지들은 서비스(Service)라고 불리는 클래스에 데이터를 모아서 관리한다.

서비스를 사용하면, 데이터에 대한 CRUD(Create, Read, Update, Delete)를 모두 서비스에게 요청하는 방식으로 구현되므로 화면 간 데이터를 주고받는 문제를 해결할 수 있다.

 

상태관리 패키지 중, Flutter 공식 문서에서도 추천하는 provider 패키지를 사용해보자.

 

1. 먼저 터미널 창에 아래 명령어를 입력하여 패키지를 설치한다. (참고: https://pub.dev/packages/provider/install)

$ flutter pub add provider //작성일 기준 버전 6.0.5

설치 후 pubspec.yaml 파일에 아래와 같이 보인다면 정상적으로 설치에 성공한 것이다.

/* pubspec.yaml */
...
dependencies:
    ...
    provider: ^6.0.5 //버전명

2. 모든 메모 데이터를 담당할 MemoService(예시)를 만든다.

memoList가 변경되는 경우 화면을 갱신해주기 위한 notifyListeners()를 사용하기 위해 ChangeNotifier 클래스를 상속 받는다.

/* memo_service.dart */
...
class MemoService extends ChangeNotifier {
    ...
    void deleteMemo({required int index}) {
    	//메모 삭제하는 코드
        notifyListeners(); //Consumer의 builder함수 호출
    }
}

3. 모든 위젯에서 패키지를 사용할 수 있도록 위젯트리 꼭대기에 서비스를 등록해준다.

/* main.dart */
import 'package:provider/provider.dart';
import 'memo_service.dart';

void main() {
    runApp(
    	MultiProvider(
            providers: [
            	ChangeNotifierProvider(create: (context) => MemoService()),
            ],
            child: const MyApp(),
        ),
    );
}

4. MemoService의 memoList 값을 사용하기 위해 위젯트리 꼭대기에 있는 Provider로 등록한 클래스에 접근해야한다. 접근하는 방법에는 Consumer 위젯과 context.read<클래스명> 가 있다.

- Consumer 위젯 : 클래스 정보 갱신 시 화면을 새로고침 해야하는 경우

Consumer<MemoService>(
    builder: (context, memoService, child) {
    	...
    }
)

- context.read<클래스명> : 1회성으로 클래스(함수나 변수)에 접근하는 경우 (화면 새로고침이 필요 없음)

MemoService memoService = context.read<MemoService>();