Compose 상태관리 Stateful...?

* Compose를 공부하며 갑자기 이해된 거 같아서 정리하면 작성했습니다 ㅎㅎ 틀리거나 잘못된 부분이 있다면 알려주시면 수정하겠습니다.

Composable의 State

Compose에는 State가 존재한다.

앱 개발에서 State 즉 상태관리는 굉장히 중요한 문제라고 한다.

그것을 관리할때 사용할 수 있는 것이 State이다.

 

이를 이해하기 위해서는 Composable의 변화를 알아야 한다.

 

xml을 이용해서 UI를 만들게 되면 가로 모드를 하거나 RecyclerView에서 notify를 하거나 하는 경우에

화면이 다시 그려지게 된다.

Composable도 마찬가지로 recomposition이 일어난다고 한다.

바로 Composable이 다시 그려지는 것이다.

 

그러면 Composable안에 데이터들은 유지되지 못하고 사라지게 된다.작동을 시켰는데 데이터가 유지되지 않는다면 당연히 아무 일도 하지 못하는 UI가 된다.

 

그래서 실제로 공식문서에 올라와있는

 

@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       Text(
           text = "Hello!",
           modifier = Modifier.padding(bottom = 8.dp),
           style = MaterialTheme.typography.h5
       )
       OutlinedTextField(
           value = "",
           onValueChange = { },
           label = { Text("Name") }
       )
   }
}​

이 코드를 실행시켜보면

아무런 입력도 되지 않는 것을 확인할 수 있다.

 

그래서?

 

그래서 사용해야 하는 것이 remeber이다.

위 코드에서

@Composable
fun HelloContent() {
   Column(modifier = Modifier.padding(16.dp)) {
       var name by remember { mutableStateOf("") }
       if (name.isNotEmpty()) {
           Text(
               text = "Hello, $name!",
               modifier = Modifier.padding(bottom = 8.dp),
               style = MaterialTheme.typography.h5
           )
       }
       OutlinedTextField(
           value = name,
           onValueChange = { name = it },
           label = { Text("Name") }
       )
   }
}

remeber에 람다로 mutableState를 넘겨주면

입력할 수 있는 TextField가 완성된다.

 

활용과 코드를 보면 remember와 mutableState가 뭔가 했다는 것을 유추해 볼 수 있다.

 

State

위에서 사용된 mutableState는 텍스트 필드의 값을, 상태를 저장하는 용도라고 생각하면 된다.

TextField의 리컴 포지션을 일으키려면 value를 변경해서 이벤트가 일어났음을 알려야 한다.

그런데 value가 변하지 않으니 입력이 되지 않았던 것이다.

하지만 두 번째 코드는 

mutableState로 만든 name에 it을 넘겨주고 있다.

텍스트가 입력되면 그 값을 mutableState에 저장하는 것이다.

그리고 그 mutableState를 remember를 이용해서 리컴 포지션이 되어도 사라지지 않게 유지하는 것이다.

그런 후 name이 바뀌었으니 텍스트 필드의 value가 바뀌고, 리컴포지션이 되면서 화면에 변화가 일어나게 되는 것이다.

 

입력 -> mutableState 저장 -> remembe로 데이터 저장 -> value 바뀜 -> 리컴포지션

 

remember

 

remember는 위에서 설명했다시피 들어온 값을 저장해주는 역할을 하는 함수이다.

mutableState로 상태를 저장하고, 그게 리컴포지션이 되어도 다시 초기화되지 않도록 저장을 해주는 방식으로

이전에 상태를 기억하는 것이다.

 

State를 이용해야 Composable을 잘 사용할 수 있다는 것이 느껴졌다.

 

Stateful & Stateless

 

하지만 여기서 아쉬운 점이 있다.

위에 코드처럼 Composable 안에서 remember를 하고 상태를 저장하면, 재사용성이 떨어지게 된다.

그게 Stateful 하다고 한다.

Stateful 한 Composabled은 내부에서 값을 정하고, 관리하기 때문에 만약 똑같은 컴포넌트에 다른 값을 쓰고 싶다면 다시 사용하기가 힘들어질 것이다.

그래서 Stateless 하게 Composable을 만들면 좋다고 하는 것이다.

 

요약

• Composable의 상태를 관리하려면 State를 사용해야한다.
• 추가적으로 remember를 사용해서 저장된 값이 리컴포지션이 될때도 초기화되지 않게 해주어야한다.