Mobile/Flutter

[Flutter] Riverpod 뽀개기 (2)

펭귄알 2024. 8. 5. 09:37

 

이전 글에서는 Riverpod의 소개와 Provider의 종류를 소개해보았는데요, 이번 글에서는 Riverpod에서 Provider를 사용하는 방법부터 설명까지 소개해보겠습니다.

WidgetRef

Provider를 생성하거나, Provider에 접근할 떄에는 모두 WidgerRef 값이 필요합니다.

아래 예시를 통해 알아보겠습니다.

 

예시에서는 Notifier 에서 초기값을 0으로 설정하고, increment 함수를 통해 state를 변화시키고 있습니다.

이제 선언을 했다면 버튼 같은 상호작용을 통해 메서드를 호출해야겠죠?

그런데 이렇게 Provider에 접근을 할려면 WidgetRef가 필요합니다.

 

아래는 WidgetRef 클래스에 대한 정의입니다.

사진을 보시면 많은 메서드 들이 있는데요, 많이 사용하게될 4가지를 알아보겠습니다.

  • ref.refresh
    • 주어진 Provider의 상태를 다시 계산하도록 강제합니다. 예를 들어, refresh 메서드를 사용하면 특정 Provider의 캐시된 상태를 무효화하고 새 값을 다시 로드할 수 있습니다.
  • ref.invalidate
    • 주어진 Provider를 무효화하여 다음 번에 해당 Provider의 상태가 요청될 때 재계산되도록 합니다.
  • notifyListeners()
    • 해당 Ref와 연결된 모든 Listener에게 상태가 변경되었음을 알립니다. 이는 상태가 수동으로 변경되었음을 알리는 데 사용할 수 있습니다.
  • ref.read
    • 주어진 Provider의 현재 상태를 반환합니다. 이 메서드는 상태를 구독하지 않고도 단순히 읽기 위해 사용됩니다.
  • ref.watch
    • 주어진 Provider의 상태를 구독하고, 해당 상태가 변경될 때마다 UI를 다시 빌드하도록 합니다.

WidgetRef 얻는 법은 다양하게 존재합니다.

1. ConsumerWidget

ConsumerWidget 은 StatelessWidget 과 사용 방법이 동일 하며, 유일한 차이점은 빌드 메서드에 추가 매개변수인 "ref" 객체가 있다는 것입니다.

2 .ConsumerStatefulWidget

ConsumerWidget  유사하게 ConsumerStatefulWidget  ConsumerState 는 State 를 갖춘 StatefulWidget 과 동일하며 , 상태에 "ref" 객체가 있다는 점이 다릅니다.

이번에는 "ref"가 빌드 메서드의 매개변수로 전달되지 않고 ConsumerState 객체 의 속성입니다 .

Provider의 결합

Provider를 결합하는 것은 Flutter의 Riverpod 라이브러리에서 매우 유용한 기능입니다. 이를 통해 여러 Provider의 상태를 결합하여 새로운 상태를 만들거나, 한 Provider의 상태가 변경될 때 다른 Provider도 함께 반응하도록 할 수 있습니다.

 

아래는 각 숫자의 값을 관리하는 Provider를 결합하는 예제입니다.

위에서 선언한 Provider를 결합하는 sumProvider를 생성합니다.

버튼을 통해 각각의 Provider 상태를 변경시키고, sum의 결과도 변하는것을 볼 수 있습니다.

 

이번 글에서는 Provider의 사용방법 및 결합 방법, WidgetRef를 알아보았습니다.