예제

평 단위를 제곱미터로 변환

@Composable
fun PyeongToSquareMeter() {
  var pyeong by rememberSaveable { mutableStateOf("23") }
  var squareMeter by rememberSaveable { mutableStateOf((23 * 3.386).toString()) }

  Column(modifier = Modifier.padding(8.dp)) {
    OutlinedTextField(
      value = pyeong,
      onValueChange = {
        if (it.isBlank()) {
          pyeong = ""
          squareMeter = ""
          return@OutlinedTextField
        }
        val numericValue = it.toFloatOrNull() ?: return@OutlinedTextField
        pyeong = it
        squareMeter = (numericValue * 3.386).toString()
      },
      label = {
        Text("평")
      }
    )

    OutlinedTextField(
      value = squareMeter,
      onValueChange = {},
      label = {
        Text("제곱미터")
      }
    )
  }
}

State Hoisting

상태가 전달되는 범위를 좁히기 위해서 상태를 윗단으로 끌어올리는 것

@Composable
fun PyeongToSquareMeter() {
  var pyeong by rememberSaveable { mutableStateOf("23") }
  var squareMeter by rememberSaveable { mutableStateOf((23 * 3.386).toString()) }

  PyeongToSquareMeterStateless(pyeong, squareMeter) { newPyeong ->
    if (newPyeong.isBlank()) {
      pyeong = ""
      squareMeter = ""
      return@PyeongToSquareMeterStateless
    }
    val numericValue = newPyeong.toFloatOrNull() ?: return@PyeongToSquareMeterStateless
    pyeong = newPyeong
    squareMeter = (numericValue * 3.386).toString()
  }
}

@Composable
fun PyeongToSquareMeterStateless(
  pyeong: String, // state를 가져오지 않고 string을 받음
  squareMeter: String,
  onPyeongChange: (String) -> Unit // 상위 계층에서 state를 사용하기 위함
) {
  Column(modifier = Modifier.padding(8.dp)) {
    OutlinedTextField(
      value = pyeong,
      onValueChange = onPyeongChange,
      label = {
        Text("평")
      }
    )

    OutlinedTextField(
      value = squareMeter,
      onValueChange = {},
      label = {
        Text("제곱미터")
      }
    )
  }
}

PyeongToSquareMeterStateless 에는 상태가 없기 때문에 이후 테스트에도 용이