3. Compose 함수 및 상태에 대한 이해

안드로이드에서 기존에 UI를 변경하기 위해서는 setText(), setColor() 등의 함수를 호출해서 변경했다. 

 

Jetpack Compose에서는 이런 방식을 사용하지 않고 상태(State)에 따라 자동으로 변화를 인식해서 UI를 갱신한다. 

이 상태 변경을 위해서 Compose에서는 mutableStateOf를 사용한다.

 

mutableStateOf()를 사용한 값이 변경할 때마다 UI를 다시 그려주는 것이다. 

@Composable
fun BasicState() {
    var count by remember { mutableIntStateOf(0) }
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Count: $count", fontSize = 24.sp)
        Button(onClick = { count++ }) {
            Text("Increase")
        }
    }
}

 

var count by remember { mutableIntStateOf(0) }

• mutableStateOf(0): count 변수를 상태로 만들고, 초기값을 0으로 설정
• remember: 재구성(Recomposition) 할때 기존 값을 유지하도록 한다.
• by 키워드 : mutableStateOf는 State<T>를 반환해서 접근하려면 count.value 이런식으로 접근해야 하지만 by 키워드 사용시 count로 직접 접근이 가능하다.

count가 버튼 클릭시마다 숫자가 증가하여 변하고 변한것을 감지하여 UI 가 갱신된다.

 

 

1. mutableStateOf가 빠졌을 경우 

mutableStateOf가 빠질 경우 숫자 자체는 증가하지만 Compose에서 상태 변경을 인식하지 못해 UI는 변경하지 않는다.

 

2. remember가 빠졌을 경우

remember가 없을 경우 UI가 재갱신 되는 과정에서 데이터를 저장하지 않고 초기값으로 생성되서 항상 0일 것이다.

 

 

Stateful과 Stateless Composables

상태를 갖고 있는 Composable 함수를 Stateful이라고 하고, 상태를 가지고 있지 않은 함수를 Stateless라고 한다. 

1️⃣ Stateful Composable (상태를 가지는 Composable)

@Composable
fun StatefulCounter() {
    var count by remember { mutableStateOf(0) } // 내부에서 상태를 관리

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count")
        Button(onClick = { count++ }) {
            Text("Increase")
        }
    }
}

 

✅ 장점: 간단한 UI 컴포넌트에서 사용할 때 편리함
❌ 단점: 상태를 내부에서 관리하므로 재사용성이 낮고, 상태를 외부에서 제어하기 어려움

 

2️⃣ Stateless Composable (상태를 가지지 않는 Composable)

@Composable
fun StatelessCounter(count: Int, onIncrement: () -> Unit) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Count: $count")
        Button(onClick = onIncrement) {
            Text("Increase")
        }
    }
}

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    StatelessCounter(count = count, onIncrement = { count++ }) // 상태를 외부에서 관리
}

 

✅ 장점: 상태를 외부에서 관리하므로 재사용 가능하고 테스트가 쉬움
❌ 단점: 사용하기 위해 상태를 별도로 관리해야 함

 

3️⃣ 왜 Stateful과 Stateless를 구분할까?

• 재사용성: Stateless Composable을 만들면, 상태를 바꿔서 여러 곳에서 쉽게 재사용할 수 있음.
• 테스트 용이성: Stateful한 Composable은 내부에서 상태를 가지므로 테스트하기 어려운 반면, Stateless한 Composable은 상태를 외부에서 주입받기 때문에 테스트가 쉬움.
• 유지보수성: 상태 관리와 UI가 분리되면 코드가 더 읽기 쉬워지고 유지보수하기 쉬워짐.

4️⃣ 언제 Stateful vs. Stateless를 선택할까?

✅ 선택 기준	Stateful	Stateless
간단한 UI 요소	✅	❌
재사용성 필요	❌	✅
상태 외부에서 관리	❌	✅
테스트 용이성	❌	✅
ViewModel과 연결	❌	✅

실제 프로젝트에서는 Stateless Composable을 기본으로 하고, Stateful이 꼭 필요할 때만 사용