[Android] Compose의 remember 그리고 MutableState (TextField 값 바꾸기)

Compose를 사용하다 보면 기본적으로 쓰이는 remember, 그리고 MutableState 에 대해 알아보겠습니다.

그에 앞서 먼저 기본적인 Compose 수명 주기에 대해 설명하겠습니다. 

 

컴포저블(Composable)  수명주기

컴포저블의 생명주기는 비교적 간단한 총 3단계로 이루어져 있습니다. 

Composition에 들어가고, 0 혹은 그 이상 다시 그려지고 (Recompose), 그리고 Composition을 나옵니다.

Composition은 Jetpack Compose가 컴포저블을 실행할 때 빌드한 UI에 관한 설명입니다.

 

- Init Composition : 처음 컴포저블을 실행하여 컴포지션을 생성

- Recomposition : 앱의 상태가 변경되면, 컴포저블을 다시 실행시켜 컴포지션을 변경 (UI가 다시 그려짐)

- Decomposition : 컴포저블이 파괴됨

 

remember,  MutableState

remember로 생성한 값은 초기 구성(Init Composition)에서 컴포지션에 저장되고, 여기서 Recomposition이 일어날 때 저장된 값을 유지하여 반환합니다.

 

그리고 이 remeber에 저장되는 값이 바로 MutableState 입니다.

MutableState는 mutableStateOf으로 쉽게 생성할 수 있습니다.

val mutableState = remember { mutableStateOf(default) }

 

사용해보기!

이전 UI 작성법에 익숙한 분은 아래 코드를 사용하여 TextField에 값을 넣으면 입력한 값대로 변경될 것을 기대할 것입니다.

@Composable
fun WriteText() {
    var text = "default"
    TextField(
        value = text,
        onValueChange = { text = it }
    )
}

 

하지만 실제로는 TextField에 값을 변경하려 해도 계속 default라는 값만 표시됩니다.

 

이때 remeber와 MutableState를 사용해야지만 값이 변경됩니다! 

@Composable
fun WriteText() {
    val text = remember { mutableStateOf("default") }
    TextField(
        value = text.value,
        onValueChange = { text.value = it }
    )
}

 

 

객체 선언 방법

컴포저블에서 MutableState 객체를 선언하는 데는 다음과 같이 세 가지 방법이 있습니다.

val state = remember { mutableStateOf(default) }
var state by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

 

 

첫번째 

val state = remember { mutableStateOf(default) }
state.value = new

앞서 사용한 가장 기본적인 사용 방법 입니다.

value 프로퍼티에 값이 저장되어 있으므로 state.value 와 같이 사용해야 합니다.

 

두번째 

var state by remember { mutableStateOf(default) }
TextField(
        value = state,
        onValueChange = { state = it }
)

by를 사용하여 위임(delegation)해주는 방식입니다.

setValue 또한 일어나야 하기 때문에 반드시 var를 사용해야 합니다.

value 값을 사용할 필요가 없어서 편리합니다.

 

또한, 아래 두가지를 import 시켜줘야 합니다.

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

 

세번째

val (state, setState) = remember { mutableStateOf(default) }
TextField(
    value = state,
    onValueChange = { setState(it) }
)

이 방식은 mutableState의 값(state)와 값을 set 할 때 상태값 저장 함수(setState)를 사용하는 방법입니다.

 

 

셋 중 본인의 코딩 스타일에 맞추어 자유롭게 사용하시면 됩니다.☺️

 

더 자세한 내용은 공식문서를 참고하세요.

감사합니다.