<div id="readability-page-1" class="page"><div id="ArticleView"> Compose는 상태로 UI를 그리는 선언형 UI입니다. 따라서 상태를 효과적으로 관리하는 것이 매우 중요합니다. 여기서는 mutableStateOf와 remember를 이용한 가장 기본적이고 간단한 상태 관리 방법에 대해서 알아봅니다.<h3>상태(State)란 무엇인가?</h3>상태는 앱이 실행되는 동안 이벤트(사용자 입력, 네트워크 응답 등)에 의해 변경될 수 있으며, 그 결과에 따라 UI를 결정하는 모든 값입니다. 버튼 클릭 횟수, 입력된 문자열, 체크박스 체크 여부, 쇼핑 앱의 장바구니에 담긴 상품 목록 등이 바로 상태입니다. 당장 아무 이벤트가 없어도 상태일까요? 네, 맞습니다. 이벤트가 없을 뿐 언제든 이벤트에 따라 변할 수 있다면 그것은 상태입니다. 변할 수 있는 잠재력을 가진 값이라면 상태입니다.<h3>왜 상태 관리를 해야 하는가?</h3>지속적으로 강조했듯이 Compose는 선언형 UI기반으로 동작하기 때문입니다. 상태를 기반으로 UI가 자동으로 업데이트되는 구조에서 상태를 올바르게 관리하지 않으면 적절한 UI가 그려지지 않습니다.<h3>Compose에서 상태를 다루는 방법: mutableStateOf, remember</h3>1) mutableStateOfmutableStateOf은 MutableState&lt;T&gt; 타입의 객체를 반환하며 내부적으로 value 프로퍼티를 통해 값을 읽고 씁니다. 생성된 객체의 값이 변경되면 Compose는 이를 감지하고 자동으로 리컴포지션이 발생합니다.그러면 다음 예제는 어떻게 동작할까요?막연히 생각하면 객체의 값이 증가하기 때문에, 즉 상태가 변경되기 때문에 리컴포지션이 발생하여 카운팅이 제대로 될 것 같습니다. 하지만 실제 실행을 해보면 숫자가 증가하지 않습니다. 왜 그럴까요? 리컴포지션이 되지 않을까요? 아닙니다. 오히려 리컴포지션 되기 때문입니다. 리컴포지션 되어 함수가 다시 호출되면 count 변수도 다시 초기화됩니다. 위 코드에서 버튼을 클릭하면 count.value가 1로 변경되고 리컴포지션이 일어납니다. 하지만 Counter 컴포저블 함수가 다시 호출되면서 val count = mutableStateOf(0) 코드가 다시 실행되어 count는 0으로 초기화됩니다. 결국 화면에는 항상 "0"만 표시됩니다.mutableStateOf(0)는 mutableIntStateOf(0)로 대체하여 사용할 수 있습니다. 가장 핵심적인 차이는 박싱(Boxing) 발생 여부입니다. 이로 인해 성능에서 차이가 발생합니다. mutableStateOf(0)는 MutableState&lt;T&gt; 제네릭 타입의 상태 객체를 생성합니다. mutableIntStateOf(0)는 Int 전용 최적화된 상태 객체 MutableIntState를 생성합니다. 제네릭 타입이 범용성이 있어 일관된 코드 작성을 할 수 있는 장점이 있지만 성능면에서는 전용 타입으로 사용하는 것이 박싱에 의한 미세한 오버헤드를 줄일 수 있습니다.흐름을 단계별로 상세히 살펴보면 다음과 같습니다.최초 실행 (Initial Composition)앱이 처음 화면에 그려질 때의 과정입니다.1. Counter 컴포저블 함수가 처음으로 호출됩니다.2. println("Counter Composable is called")가 실행되어 "Counter Composable is called"가 출력됩니다.3. var count = mutableStateOf(0) 코드가 실행됩니다.count라는 새로운 MutableState 객체가 생성됩니다.이 객체는 내부적으로 0이라는 값을 가집니다.4. Text(text = "${count.value}", ...)가 실행됩니다.count.value (즉, 0)를 읽어서 화면에 "0"이라는 텍스트를 표시합니다.5. Button(onClick = { ... })이 실행됩니다.버튼의 UI가 그려집니다.버튼의 내용을 그리기 위해 { ... } 람다 블록이 실행됩니다.6. 버튼의 람다 블록 안에서 println("Button Composable is called")가 실행되어 "Button Composable is called"가 출력됩니다.버튼 내부에 "Count"라는 텍스트가 표시됩니다.최초 실행 후 화면:화면에 숫자 "0"이 보입니다. 그 아래 "Count"라고 적힌 버튼이 보입니다. 버튼 클릭 시 (Button Click &amp; Recomposition)사용자가 "Count" 버튼을 클릭했을 때의 과정입니다. 이 부분이 문제의 핵심입니다. 1. 사용자가 버튼을 클릭하면 Button의 onClick 람다, 즉 { count.value++ }가 실행됩니다.2. count.value가 0에서 1로 변경됩니다.3. Compose는 상태 객체인 count의 값이 변경된 것을 감지하고, 이 상태를 읽는 모든 컴포저블을 리컴포지션하도록 예약합니다. 여기서는 Counter 함수 전체가 해당됩니다.4. Compose 런타임이 Counter 함수를 다시 호출합니다.5. println("Counter Composable is called")가 다시 실행되어 "Counter Composable is called"가 또 출력됩니다.6. [문제의 원인] var count = mutableStateOf(0) 코드가 또다시 실행됩니다.이전 단계에서 값이 1로 변경되었던 count 변수는 사라지고, 완전히 새로운 MutableState 객체가 생성되어 count 변수에 할당됩니다.이 새로운 count 객체는 다시 0으로 초기화됩니다.7. Text(text = "${count.value}", ...)가 실행됩니다.방금 새로 만들어진 count 객체의 값, 즉 0을 읽어 화면에 "0"을 표시합니다.8. Button과 그 내용이 다시 그려집니다. 결과적으로 사용자가 버튼을 누를 때마다 리컴포지션이 발생하여 count 상태가 0으로 초기화되기 때문에 화면의 숫자는 바뀌지 않습니다.이러한 경우는 어떻게 해결해야 할까요? 바로 이어서 살펴볼 remember를 사용하면 됩니다.2) rememberremember는 컴포저블 함수가 리컴포지션 되어도 이전 컴포지션에서 계산하고 저장했던 값을 기억하게 해주는 함수입니다. 사용법은 간단합니다. 기억하고자 하는 상태를 remember로 감싸면 됩니다.로그를 살펴보면 리컴포지션이 발생하고 있는 것을 확인할 수 있습니다.최초 실행 시Counter Composable is calledButton Composable is called버튼을 클릭 시Counter Composable is calledremember는 리컴포지션이 발생해도 이전에 생성한 MutableOfState 객체를 재사용합니다. 따라서 counter.value가 1로 변경되었다면 해당 값을 그대로 유지합니다.remember 사용 시 by를 이용해 위임하면 count.value를 사용해 값에 접근할 필요가 없어 더욱 편리합니다.이러한 remember에도 단점이 있습니다. 바로 화면 회전이나 다크모드 전환처럼 구성 변경으로 인해 Activity가 재생성되는 경우에는 상태가 초기화됩니다. 이러한 경우 상태를 유지하려면 remember 대신 rememberSaveable을 사용하면 됩니다.<h3>정리</h3>상태 → UI와 데이터의 연결고리입니다.이벤트(Event) → 사용자의 버튼 클릭, 텍스트 입력 등 상태를 변화시키는 행위입니다.상태 업데이트(State Update) → 이벤트가 발생하면 앱은 상태를 새로운 값으로 변경합니다.UI 업데이트 → Compose는 상태의 변경을 감지하고 새로운 상태를 반영하여 UI를 다시 그립니다.mutableStateOf → UI가 상태 변경을 감지하도록 합니다.remember → 리컴포지션에도 상태를 유지합니다.rememberSaveable → 기기 회전 등 구성 변경에서도 상태를 유지합니다. </div></div>

서준수

Compose는 상태로 UI를 그리는 선언형 UI입니다. 따라서 상태를 효과적으로 관리하는 것이 매우 중요합니다. 여기서는 mutableStateOf와 remember를 이용한 가장 기본적이고 간단한 상태 관리 방법에 대해서 알아봅니다.  상태(State)란 무엇인가? 상태는 앱이 실행되는 동안 이벤트(사용자 입력, 네트워크 응답 등)에 의해 변경될 수 있

Compose 상태 관리

댓글