[flutter] Provider

공부할거야·2022년 10월 13일

State changeNotifierProvider flutter provider

flutter

목록 보기

4/5

State

State:어떤 형태든 UI에 변화가 생기도록 영향을 미치는 데이터로 두 가지 종류가 존재한다.

앱 수준의 데이터
: 서버와 연동, 사용자 인증, 서버에 저장된 정보를 끌어와 화면에 보여주는 등의 방법으로 앱의 화면에 변화를 일으키는 모든 데이터
위젯 수준의 데이터
: 빈 체크박스에 사용자가 체크를 누를 때 이 상태를 위젯 차원에서 해결해 화변에 변화가 생기게 하는 데이터

flutter는 앱의 state가 바뀌면 hot reload를 통해 위젯트리를 rebuild된다.

setState의 문제점

setState는 위젯 Lifecycle에 build()를 다시 호출해 UI를 랜더링하게 하는 함수로 가장 간단하게 변화된 state를 UI에 반영할 수 있다.

비효율성
위젯은 트리 구조로 위젯 트리가 커지면 부모 자식 위젯 간에 콜백으로 연결되어 있어 setState() 호출시 해당 위젯 외에도 하위 트리에 존재하는 위젯들까지 rebuild 된다. 하위 트리의 위젯이 많을 수록 성능 저하기 일어난다.
동시에 다른 위젯의 state를 업데이트 할 수 없음
setState()는 UI의 상태를 state class 내부에서 관리하는데 이 때문에 A 위젯과 B 위젯이 서로 영향을 받아 상태를 유지할 때 A 위젯의 변경 상태를 B 위젯이 알 수 없어 이벤트가 B까지 업데이트 되지 않는다.

plus 버튼과 minus 버튼을 눌러 plus point와 minus point 값을 올려주고 두 값을 더해 total score이 출력되는 프로그램

변수들은 MyPage에 존재하며 이 데이터가 바뀔 때마다 MyPage 밑의 모든 Widget들이 rebuild된다.

State Management

: 위젯 트리 상에서의 위치와 상관없이 데이터를 필요로 하는 위젯이 쉽게 데이터에 접근할 수 있어야 한다.
: 변화된 데이터에 맞추어 UI를 다시 그려줘야 한다.

provider

provider는 상태를 관리하는 툴로 Widget에게 상태를 주입한다.

왜 사용할까?
1. 위젯이 쉽게 데이터에 접근할 수 있는 방법
2. 변화된 데이터에 맞춰서 UI를 다시 그려주는 기능

데이터에 쉽게 접근할 수 있는 방법

Provider 역시 하나의 위젯으로 위젯트리 상에서 일반 위젯과 똑같은 특성을 가지게 된다. Provider 위젯 또한 데이터를 필요로 하는 위젯들보다 항상 상위에 위치해야 한다.(?)

_needData = Provider.of<Data>(context)

_needData: 위젯이 전달받기를 원하는 데이터
Provider: 데이터를 보내주는 주체
of: 주어진 context를 거슬러 올라가면서 가장 가까이에 있는 원하는 타입의 인스턴스를 찾아서 반환하라는 함수
Data: 필요한 데이터 타입
context: 데이터를 보내주는 연결 통로, context와 연결된 Widget만 데이터를 보낼 수 있음
-> 이 과정을 통해 _needData 변수는 필요할 때마다 불러서 전달할 수 있는 데이터가 된다.


class MyApp extends StatelessWidget {
	const MyApp({key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
    	return Provider(
      		create: (context) => DataProvider(),
      		child: PrintData()
        );
    }
}

Provider의 child가 된 PrintData아래의 모든 위젯에서 DataProvider 인스턴스에 접근할 수 있다.