최근에 다시 플러터 공부를 시작했다.
요즘 <Flutter Provider Essential 코스> 라는 유데미 강의를 들으면서 Provider 라는 상태 관리 패키지에 대해 공부하고 있는데, 꽤나 어렵게 느껴져 천천히 정리하면서 공부해보려고 한다.
먼저 Provider 에 대해 설명하기 앞서 플러터의 두 가지 유형의 위젯에 대해 간단하게 알고 넘어가보자.
플러터에는 상태를 가지는/상태를 가지지 않는 두 가지 유형의 위젯이 존재한다. 상태를 가지는 위젯을 Stateful Widget, 상태를 가지지 않는 위젯을 Stateless Widget 이라고 한다.
Stateful Widget 은 말 그대로 상태(데이터) 를 가지고 상태의 변화에 따라 UI 를 변경하는 위젯을 말한다.
Stateless Widget 역시 말 그대로 상태(데이터) 를 가지고 있지 않기 때문에 이벤트나 사용자 상호 작용에 의해 동작하지 않는 위젯이다.
그렇다면 Provider 란 무엇이며 왜 사용하는 것일까?
Provider 란 플러터 앱에서 상태 관리를 쉽게 할 수 있도록 도움을 주는 패키지로 Provider 위젯을 통해 다른 위젯에 있는 필요한 데이터와 메소드에 쉽게 액세스 할 수 있는 방법을 제공하고, Provider 를 확장시켜 데이터의 변경을 감지하고 UI 가 리빌딩 될 수 있도록 도움을 준다.
여기까지만 들었을 때는 꼭 사용해야 할까..? 라는 생각이 들 수 있다. 그렇다면 아래의 예시를 살펴보자.
위젯 A 에는 counter 라는 데이터와 counter 를 증가시키는 increment 라는 함수가 있고, 버튼을 누르면 counter 가 증가한다.
그리고 위젯 B에서 위젯 A 에 있는 counter 라는 데이터를 필요로 한다.
그렇다면 위젯 A 에 있는 counter 를 위젯 B 로 전달하려면 어떻게 해야 할까?
위젯 A 와 위젯 B 의 공통 조상인 위젯 C 로 counter 와 increment 를 올려야 한다.
위 그림은 counter 와 increment 를 위젯 C 로 올린 후의 상태이다.
위젯 C가 counter와 increment 함수를 가지고 있지만(정의하고 있지만), 실제 counter 값이 증가하려면 위젯 A의 버튼이 눌려야 한다.
즉, 위젯 A가 counter 값을 제어하고 있는 것이다. 이와 같이 제어가 역전된 관계를 inversion of control 이라고 하는데, 이런 상태는 불필요한 re-build 가 일어나 앱의 전체적인 퍼포먼스를 떨어뜨리게 된다.
또 아무 상관없는 middle 위젯이 위젯 B 에게 counter 값을 전해주기 위해 불필요한 데이터를 받아야 하는 불필요한 일이 생기기 때문에 이 또한 앱의 퍼포먼스를 떨어뜨리게 된다.
Provider 는 이 문제를 해결하기 위해 나왔으며, 상태(데이터)를 전역적으로 다른 위젯과 공유해야 할 때 사용한다.
이처럼 Provider 을 사용하면 위젯 트리와 상관없이 상태(데이터)를 저장할 클래스를 생성하고, 상태(데이터)를 공유하는 공통 조상 위젯에 Provider 를 제공한다. 상태(데이터)가 필요한 위젯은 Provider 의 상태(데이터)를 읽어서 필요한 상태(데이터)를 얻을 수 있다.
- 끝 -
📖 References 📖
유데미 <Flutter Provider Essential 코스>
