기존 StockScreen 구조
- @Compose 함수
- 서버 통신 함수
바뀐 StockView 구조
StockScreen의 파일 명과 함수 명을 StockView로 변경하였다.
StockViewModel 파일을 생성하여, 데이터를 데이터베이스에서 받아오고, 화면을 이동하는 등의 역할을 할 수 있는 함수를 만들었다.
StockListDump라는 LazyColumn의 UI를 만드는 compose 함수도 같은 파일에 있었는데 이는 따로 파일을 만들어주었다.
LiveData 사용하기
이번에는 LiveData를 사용해보느라 시간이 좀 오래 걸렸다.
LiveData는 observer pattern을 가지고 있다. 이는 관찰자가 이벤트를 발견하면 바로 반응하는 패턴이다.
StockViewModel에 LiveData를 생성해주었다.
private val _stockList = MutableLiveData<List<StockData>>()
val stockList : LiveData<List<StockData>> get() = _stockList위와 같이 MutableLiveData를 한 번 거치는 이유는 LiveData는 읽기만 가능하고, MutableLiveData는 외부에서 데이터 읽기와 쓰기가 가능하기 때문이다.
LiveData에 값 넣어주기
init {
getStockList()
}
private fun getStockList() = viewModelScope.launch {
_stockList.value = stockDao.getAllStockData()
}위와 같이 데이터베이스에서 값을 가져와 MutableLiveData에 넣어주는 명령을 담은 메서드를 만들어주고, Init에서 실행되도록 하였다.
LiveData 값 받기
이제 StockView에서 데이터베이스에서 가져온 값을 받아야 한다.
val stockCardList = remember{
mutableStateListOf<StockListCard>()
}
// viewModel로부터 stockList를 받아 stockListCard 형태로 변환
viewModel.stockList.observe(LocalLifecycleOwner.current){
for(stockData in it){
stockCardList.add(
StockListCard(
stockData.stockName,
stockData.stockQuantity,
stockData.exchange,
stockData.stockPrice
)
)
}
}viewModel의 stockList에 observe를 담아주고, 이벤트가 발생할 때 어떠한 작업을 해줄지 안에 넣어주었다.
LazyColumn에서 사용하는 data class가 다르기 때문에, 필요한 값만 가져와서 다시 튜닝하도록 하였다.
Compose에서 lifecycleOwner를 사용하려면 LocalLifecycleOwner.current를 lifecycleOwner 인자에 넣어주면 된다.
