[Compose Study] ViewModel

728x90
반응형

* ViewModel을 사용하여 아래 화면의 변경을 눌렀을 때 Hello Text를 변경해볼 예정이다.

 

* 우선 "Hello" 텍스트는 변해야 할 데이터이기 때문에 data = mutableStateOf("Hello")로 위에서 선언해 준 다음

   "Hello" 대신 data.value로 바꾼다. 그 뒤 Button의 onClick = { data.value = "World" }로 설정해주면

   간단하게 버튼을 눌렀을 때 "World"로 바뀌는 것을 볼 수 있다.

 

* 또 다른 방법은 ViewModel 을 사용하는 것이다.

* ViewModel은 activity와 lifeCycle을 동일하게 가져가는 특성 때문에 remeber를 사용하지 않고

   data = mutableStateOf("Hello")처럼 사용할 수 있다.

* viewModel을 사용하는 것은 기존 kotlin에서 선언하는 방식처럼 선언하면 된다. 그리고 data.value를 viewModel.data.value로

   수정하면 된다. ViewModel에서 remember를 사용하지 않아도 되는 이유는 activity와 lifeCycle을 동일하게 가져가는 특성때문이다.

 

* 마지막은, Compose 안에서 ViewModel을 사용하는 방법이다.

* implementation을 해 준 뒤, setContent에서 위와 같이 불러와 주면 된다.

* 보통 data를 지금처럼 외부에 공개하지 않는다. data를 View쪽에서 마음대로 조작을 할 수 있기 때문이다. 

  따라서, private로 data를 설정하고, 외부에 읽기 전용 State 타입으로 공개를 한다.

 

* 이렇게 되면 위에 setContent에서 viewModel.data.value = "World"로 수정이 안된다. 따라서 ViewModel 안에 

   changeValue함수를 만들고 거기서 변경하는 로직을 짠 다음 viewModel.changeValue()로 변경을 하게 해야 한다.

 

 

* 결과 화면

728x90
반응형

'Study > Android' 카테고리의 다른 글

[Compose Study] LazyColumn  (1) 2024.06.05
[Compose Study] State 다루기  (0) 2024.06.04
[Compose Study] Navigation  (0) 2024.06.02
[Compose Study] Scaffold  (0) 2024.05.30
[Compose Study] 구조분해  (0) 2024.05.28
TAGS.

Comments