상태(State)란

지난 글에서 컴퍼저블은 함수형 ui라고 했었지.

콜백으로 이벤트를 상위로 올리는 것까지 봤는데, 이번엔 반대로 컴퍼저블 자기 자신이 뭔가를 "기억"해야 하는 상황을 보자.

예를 들어 지난번 GroupCard를 클릭했을 때, 선택된 카드는 테두리 색이 바뀌게 하고 싶다고 해보자.

kotlin

@Composable
fun GroupCard(
    group: Group,
    onClick: () -> Unit
) {
    var isSelected = false

    Card(
        onClick = {
            isSelected = true
            onClick()
        }
    ) {
        // isSelected에 따라 테두리 색 다르게
    }
}

이렇게 하면 될 것 같지?

근데 실제로 눌러보면 테두리 색이 안 바뀐다.

왜 그럴까? 이걸 이해하려면 먼저 "리컴포지션이 언제, 왜 일어나는지"부터 알아야 한다.

리컴포지션은 언제 일어나나?

컴포즈는 컴포저블 함수를 처음 실행할 때, 그 함수 안에서 어떤 값을 "읽었는지"를 다 기록해둔다. 정확히는, State라는 특별한 컨테이너에 담긴 값을 읽었을 때만 기록한다.

나중에 그 State의 값이 바뀌면, 컴포즈는 "아, 이 값을 읽고 있던 함수가 있었지. 얘를 다시 그려야겠다"고 판단해서 그 함수를 다시 실행한다. 이게 리컴포지션이다.

즉 리컴포지션은 아무 때나 일어나는 게 아니라, "State로 선언된 값이 바뀔 때" 그 값을 읽고 있던 부분만 콕 집어서 일어난다.

그럼 위 코드는 왜 안 됐을까?

var isSelected = false는 그냥 평범한 코틀린 변수지, State가 아니다. 컴포즈 입장에서는 이 값이 바뀌었는지 아닌지 감시할 방법이 아예 없다.

그래서 isSelected = true로 값을 바꿔도, 컴포즈는 "뭔가 바뀌었으니 다시 그려야겠다"는 신호를 전혀 못 받는다. 리컴포지션 자체가 일어나지 않으니 화면도 당연히 안 바뀌는 것이다.

그럼 State로 바꾸면 어떻게 될까?

kotlin

var isSelected by remember { mutableStateOf(false) }

여기서 두 개가 하는 역할이 다르다.

mutableStateOf(false)는 이 값을 컴포즈가 감시할 수 있는 State로 만들어주는 것이다. 이 값을 읽는 컴포저블이 있으면 컴포즈는 그걸 기록해두고, 값이 바뀌면 그 컴포저블을 다시 실행하도록 예약한다.

remember는 별개의 역할이다. 리컴포지션이 일어나서 함수가 다시 실행되더라도, 이 값을 처음부터 다시 만들지 않고 이전 값을 그대로 붙잡아두는 역할을 한다.

왜 remember가 따로 필요하냐면, 리컴포지션이 일어난다는 건 결국 함수가 위에서부터 다시 실행된다는 뜻이기 때문이다. remember 없이 mutableStateOf(false)만 쓰면, 함수가 다시 실행될 때마다 그 줄을 또 만나서 매번 새로운 State를 false로 다시 만들어버린다. remember가 "어, 이거 이미 만든 적 있잖아. 새로 만들지 말고 기존 값 그대로 써"라고 붙잡아주는 것이다.

정리하면:

1. 카드 클릭 → isSelected = true (State 값 변경)
2. 컴포즈가 이 State를 읽고 있던 곳을 감지 → 리컴포지션 예약
3. GroupCard 함수가 다시 실행됨
4. remember 덕분에 isSelected는 초기화되지 않고 true로 유지된 채 읽힘
5. 바뀐 값 기준으로 테두리 색이 다시 그려짐

이 둘을 같이 써야 "값이 바뀌면 다시 그리고, 다시 그려져도 값은 유지되는" 상태가 완성된다.

코드를 고쳐보면:

kotlin

@Composable
fun GroupCard(
    group: Group,
    onClick: () -> Unit
) {
    var isSelected by remember { mutableStateOf(false) }

    Card(
        onClick = {
            isSelected = true
            onClick()
        },
        border = if (isSelected) BorderStroke(2.dp, Color.Blue) else null
    ) {
        // ...
    }
}

이제 눌렀을 때 실제로 테두리 색이 바뀐다.

근데 여기서 중요한 게 하나 있다.

이 상태, 앱을 껐다 켜면 사라진다. 이 화면을 벗어났다가 다시 들어와도 초기화될 수 있다.

왜냐면 remember는 딱 "이 컴퍼저블이 화면에 떠 있는 동안"만 기억하는 메모리상의 임시 저장소이기 때문이다.

즉 State는 "진짜 저장"이 아니라 "화면이 떠 있는 동안 잠깐 기억하는 것"에 가깝다.

진짜로 앱을 껐다 켜도 유지되게 하려면 로컬 DB(Room)나 DataStore, 아니면 서버에 저장해야 한다.

그건 다음 글에서 다뤄보겠다.