앱을 개발하는 도중 아래의 화면과 같은 기능을 구현해야 하는 일이 생겼다.
사용자가 본인이 살지 말지 고민 중인 상품을 올리면 다른 사용자들이 살지 말지 투표를 할 수 있는 기능이다.
투표를 하면 투표에 참여한 전체 인원 중 몇 명이 어디에 투표했는지 확인이 가능하다.
이 기능을 구현하기 위해 아래와 같은 단계를 거쳤다.
- 살 or 말 버튼을 눌렀을 때 해당되는 게시글 id 값으로 투표 정보를 담은 요청을 서버로 보낸다.
- 투표를 한 게시글 id를 이용해 데이터를 새로 받아온다.
- 새로 받아온 데이터를 게시글 list에 추가한다.
문제는 3번에서 일어났다.
투표를 성공적으로 하고, 내가 보낸 투표 정보가 반영된 데이터를 서버에서 새로 받는 것까진 성공했지만, 정작 받아온 데이터를 list에 추가해도 UI에서 첨부된 이미지와 같이 변하지 않았기 때문이다.
이 문제는 본인이 ViewModel에서 MutableState로 받아온 데이터를 저장했기 때문이다.
MutableState는 객체의 속성이 변경되었을 때는 이를 인지하지 못하고, 객체 자체가 변경되었을 때만 변경을 감지한다.
이 부분에 대해 자세히 알지 못했던 나는 MutableState에 들어있는 데이터 list 중에 내가 투표에 참여한 특정 인덱스의 값만 최신화 시켜줬고, Compose는 변경 사항을 인지하지 못했던 것이다.
그래서 MutableState 대신 MutableStateFlow를 도입하여 이 문제를 해결했다.
MutableStateFlow는 아래와 같은 특징을 가진다.
- 코루틴과 함께 사용되며, 데이터 스트림의 상태를 관리하고 변화를 통지한다.
- 여러 값이 시간에 따라 변경될 수 있다.
- 객체의 속성 값이 변경될 때도 이를 감지하고 상태를 업데이트 한다.
※ 데이터 스트림이란?
- 시간이 지남에 따라 연속적으로 생성되는 데이터의 흐름을 의미한다.
- 이 개념은 단일 값이 아닌 여러 값이 순차적으로 발생할 수 있는 상황에 유용하다.
- 데이터를 스트림으로 처리하면 데이터가 비동기적으로 생성되고 소비될 때 더 효과적으로 관리할 수 있다.
따라서 MutableStateFlow를 이용하여 위와 같은 케이스 같이 객체의 일부 속성값이 변경될 때 이 생태를 감지하고 UI에 반영할 수 있었다.
Android, Flutter