Flutter Riverpod 사용하기

강정우·2023년 5월 29일
0

Flutter&Dart

목록 보기
42/87
post-thumbnail

StatefulWidget => ConsumerWidget

  • 자 앞서 riverpod의 기본적인 기능에 대해 알아보았으니 리팩토링은 진행해보자.

  • 우선 위 코드를 모면 flutter 메모리상에 데이터를 저장하고 사용하고 있다. 그리고 이는 더이상 State class에서 나오는 widget객체를 사용하고 있지도 않기 때문에 이 class를 StatefulWidget으로 사용할 필요가 없다. 메모리를 조금이라도 아끼고자 Stateless(ConsumerState) 위젯으로 바꾸고
    없어진 변수나 로직에 대해서는 ref의 watch나 read 메서드로 들러오면 된다.

watch

  • 위 코드 같은 경우에는 원래 StatelessWidget을 State을 가져와서 사용하기만 하는 ConsumerWidget으로 바뀐 모습이고 그에 따라 build 메서드 또한 추가적으로 river pod에서 사용한 ref 객체를 사용하기위해 WidgetRef를 사용한 모습이다.

  • 이때, null일 가능성이 있다고 ? 이 처리되어있는데 이는 flutter에게 정확히 어떤 모양의 데이터가 넘어갈 것인지를 인지를 시켜주면 더 시멘틱한 코드가 된다.

read

  • 위 코드는 Provider의 Notifier에 존재하는 addPlace 메서드를 끌고와서 사용한 후 Navigator obj의 pop 메서드로 해당 화면을 나가려고 작성한 모습이다.

  • 추가적으로 Navigator에 나오는 context는 ConsmerState에서 나오는 context 이다.

Provider 모으기

  • JS에서도 export 로 여러 모듈을 내보낼 수 있는 것 처럼 dart도 여러 공급자를 한데 모아서 관리할 수 있다.
    당연하게도 서로 관련이 있는 공급자끼리 묶어서 관리해주는 것이 좋다.

  • 위 코드는 2가지의 공급자가 한 파일에 있는 것이다. filtersProvier와 filteredMealsProvider이다.
    이때 특이한 점은 Provider 밑에 쓰인 ref.watch의 값(Provider dependency)이 변화할 때 마다 해당 로직이 작동하여 자동으로 최신화해준다는 것이다.

  • 추가적으로 filteredMEalsProvider를 StateNotifierProvider가 아닌 일반 Provider를 사용한 이유는 State를 직접적으로 mutation할 일이 없기 때문이다. 즉, StateNotifier가 필요없기 때문이다.

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글