본문 바로가기
Flutter

Flutter[플러터] - Riverpod(리버팟) 상태관리 누구나 쉽게! (1)

by s_hoonee 2024. 11. 7.
반응형

텍스트로 길게 써서 가독성이 좋진 않지만 제가 처음 상태관리를 어려워할 때를 생각하며 최대한 쉽고 간단하게 설명했습니다.

상태관리가 어려우신분들은 꼭 한 번 읽어보세요!

 

1. 상태 관리를 해야 하는 이유

앱 실행 후 서버를 통해 로그인을 하여 서버로부터 DB에 있는 닉네임을 리턴받았다고 치자. 만약 마이페이지와 메인 홈 화면 View 모두에서 DB에서 가져온  닉네임을 표시를 해주고 있는데 닉네임 변경 시 이 두 곳에 있는 필드의 값을 일괄 변경해줘야하지 않는가? 그럼 그때 마다 해당 위젯에서 setState를 쳐줘야 할 것이다. 혹은 아래처럼 할 수 있다.

자, 만약 상태관리를 안했다면 2가지 방법이 있을거다. 

(1) static 변수를 이용

(2) 생성자로 위젯간 소통 (setState 사용으로 변경 시 리빌드는 덤)

이런식으로 전역적으로 쓰는 필드를 상태에 저장하고 UI 혹은 값을 전역적으로 쓰기 위해 이 2가지 외에 새로운 방법이 상태관리이다.

viewModel과 유사한 역할을 하는 상태관리 중 RiverPod 패키지의 프로바이더라는 친구에다가 DB로부터 가져온 값을 넣어준다.

그럼 Heap 영역에 상태값(닉네임)이 들어가고 이 값이 필요하거나 이 값을 View에 표시할 때 이 프로바이더한테 야! 닉네임 값 가져와! 하고 불르는거다.

View단에서는 1회성으로 불러오거나 꾸준히 지속적으로 가져와! 라고 2가지 옵션이 있다. (read / watch)

만약 지속적으로 가져오는 경우(watch) 닉네임이 변경될 시 해당 위젯한테 setState를 쳐주지않아도 자동으로 View단에서 표시중인 닉네임 텍스트가 변경이 된다

(이 때 Heap영역에 있는 프로바이더에 접근하기 위해 위젯 트리 안에서 Consumer위젯으로 한 번 위젯을 묶고 그 하위 위젯의 크기만큼 리빌드 된다.. 이건 다음 포스트에 더 자세히 풀겠다) 

 

2. 상태 관리를 해야 하는 대상

상태 관리는 앱의 데이터 흐름을 일관되게 유지하고, UI의 안정성을 높이기 위해 관리가 필요한 대상들에 적용된다. 포스기로 예로 들면 상품 목록, 테이블 목록, 현재 웨이팅 상황 등이 있다. 

다음은 일반적으로 상태 관리를 해야 하는 대상들입니다.

  • 글로벌 상태: 로그인 상태, 테마, 언어 설정과 같이 앱 전반에 영향을 미치는 전역적 상태.
  • 페이지 또는 섹션 상태: 특정 화면이나 페이지에서만 사용되는 상태로, 예를 들어 쇼핑 앱의 장바구니나 검색 결과 페이지 등에서 사용.
  • 위젯 간 공유되는 상태: 여러 위젯에서 공통적으로 참조하거나 업데이트할 필요가 있는 상태. 예를 들어, 전체 앱에서 일정 시간 간격으로 업데이트되는 데이터.
  • 비동기 작업 결과: 서버 응답을 기다려야 하거나 네트워크 요청과 같이 비동기 작업으로부터 얻어지는 데이터. 예를 들어 뉴스 앱에서 최신 기사를 불러오는 작업.
  • 폼 데이터 및 사용자 입력 상태: 입력 폼과 같이 사용자가 직접 입력하는 데이터를 다루는 상태로, 유효성 검사와 같은 로직이 포함될 수 있음.

 

3. 상태 관리의 이점

상태 관리를 체계적으로 하면 앱의 유지보수성, 안정성, 성능이 크게 개선된다. 특히 앱의 규모가 커질수록 상태 관리를 통해 얻는 이점은 더욱 두드러진다. 일단 형식상 알고가자.

  • 유지보수성 향상: 상태를 일관성 있게 관리하고 UI와 로직을 분리하면 코드의 가독성이 높아지고 유지보수가 쉬워진다. 이는 협업 환경에서 특히 유용하며, 특정 기능에 오류가 발생했을 때 이를 추적하고 해결하는 시간을 단축할 수 있다.
  • 코드 재사용성 증가: 상태 관리 패턴을 통해 비즈니스 로직과 UI를 분리하면 여러 화면에서 동일한 상태나 기능을 쉽게 재사용할 수 있다. 이를 통해 코드의 중복을 줄이고, 기능을 변경하거나 확장할 때도 기존 코드를 크게 수정하지 않고 작업할 수 있다.
  • UI 일관성 유지: 상태 관리 덕분에 특정 데이터 변경이 앱 전체에 동기화되므로, 각 화면에서 같은 데이터를 사용할 수 있게 되어 일관된 UI를 유지할 수 있다.
  • 성능 최적화: 상태 관리 패턴을 통해 불필요한 위젯 빌드를 줄이고, 특정 위젯이나 화면에서만 필요한 상태를 로드함으로써 성능이 개선됩니다. 특히 데이터가 많은 리스트나 복잡한 애니메이션을 사용하는 화면에서는 상태 관리가 효율적으로 이루어질 때 최적의 성능을 발휘할 수 있다.

 

4. 왜 리버팟인가?

Flutter 팀에서 개발하고 유지 관리하고 있으며, Flutter에서 권장하는 공식 상태관리이다.

처음 Provider가 등장한 이후 개발자들이 경험한 몇 가지 한계를 보완하기 위해 Riverpod이 등장했으며, Provider가 더 나아가 Riverpod가 된 것이라고 보면 된다. Provider의 철자를 재조합하면 RiverPod가 된다 ㅋ