새우버거의 개발 블로그

Compose에서 UI를 업데이트하는 주요 방법은 상태(state)가 변경되어 해당 상태를 읽는 Composable 함수에서 Recomposition이 발생하는 것입니다. 여기서 상태는 Composable 함수에 전달되는 매개변수일 수 있고, 함수 내부에서 remember, mutableStateOf 등으로 선언된 값일 수 있습니다. 첫 번째 코드는 실행해도 입력창에 값을 입력해도 아무런 변화가 나타나지 않습니다. 이는 View 시스템의 EditText와 달리, Compose의 TextField는 내부적으로 값을 자동으로 업데이트하지 않기 때문입니다. 두 번째 코드처럼 TextField의 value 값이 변경될 때만 Recomposition이 발생하여 UI가 정상적으로 업데이트됩니다.// value가 변..

Jetpack Compose에서 Composable 함수가 실행되면 앱의 UI를 트리 구조로 구성하고, 이 트리 구조를 Composition이라고 합니다.Composable의 수명 주기는 초기 Composition, Recomposition, Composition 종료로 정의됩니다.초기 Composition : 앱이 처음 실행되거나 화면이 처음 그려질 때, Compose가 UI를 그리기 위해 어떤 Composable 함수를 호출했는지 트리 구조로 기록하는 과정Recomposition : 앱의 상태(State) 변경 시, 해당 상태를 읽는 Composable 함수만 다시 실행해서 Composition 트리의 필요한 부분만 업데이트하는 과정Composition 종료 : Composable이 트리에서 제거되는..

State-based TextField 에서는 기존의 Value-based TextField 와 달리, TextFieldState 클래스를 통해 입력값, 커서 위치 등 입력창의 상태를 통합적으로 저장하고 관리합니다. 입력 흐름 전체를 하나의 객체로 캡슐화하여 관리하기 때문에 기존의 Value-based TextField 보다 안정적이고, 일관되게 입력창을 구현할 수 있습니다.// Value-based TextFieldvar text by remember { mutableStateOf("Hello") }TextField( value = text, onValueChange = { text = it },)// State-based TextFieldval state = rememberTextFiel..

Android View 시스템에서는 사용자 입력을 처리할 때 EditText를 사용했지만, Jetpack Compose에서는 EditText 대신 TextField를 활용해 입력 필드를 구현합니다. TextField는 value-based와 state-based, 두 가지 유형이 있으며, 공식 문서에서는 state-based TextField 사용을 권장하고 있습니다.상태 기반 TextField 는 아직 실험 API 라서 Material 3 버전 1.4.0-alpha14를 사용해야 확인할 수 있습니다. 두 유형의 차이와 함께 Compose의 TextField에 대해서 정리해봅니다.TextField vs BasicTextField우선 TextField 와 BasicTextField 가 무엇인지 살펴보겠습니..