[Android Compose State] MutableState을 remember과 함께 다루는 다양한 방법 : 구조분해, by 키워드(Delegation) 사용

2021. 11. 26. 05:47· Android Jetpack Compose/Compose State
목차
  1. remember이란
  2. MutableState 다루기
  3. 구조 분해 사용
  4. by 사용 (Delegation 사용)
반응형

remember이란

Compose는 State값이 바뀌면 Recomposition(재구성)이 일어난다. 이때 이전 State를 기억해야 하는 경우 remember을 이용해 값을 저장할 수 있다.

 

예를 들어 아래와 같이 remember 없이 textState를 저장할 경우 값이 입력될 때마다 State가 바뀌어 Recomposition이 일어나 textState에 다시 mutableStateOf("")이 세팅되게 된다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val textState = mutableStateOf("")
            TextField(value = textState.value, onValueChange = { textValue -> textState.value = textValue })
        }
    }
}

그림1. remember 없이 사용

 

여기서 remember 키워드를 추가해주면 TextField에 값이 정상 출력되는 것을 볼 수 있다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val textState = remember {
                mutableStateOf("")
            }
            TextField(value = textState.value, onValueChange = { textValue -> textState.value = textValue })
        }
    }
}

그림2. remember과 함께 사용

 

위의 예제를 가져온 이유는 위의 코드의 MutableState부분을 우아하게 바꾸어 보려고 하기 때문이다.

 

MutableState 다루기

MutableState은 총 3가지 방법으로 사용이 가능하다. 위에서는 이 중 단순 remember을 사용해 값을 저장했으므로, 아래에서는 MutableStat

  • 단순 remember 사용
  • 구조분해 사용
  • by 사용 (Delegation 사용)

 

구조 분해 사용

MutableState의 구조분해 구문을 사용해보자.

@Stable
interface MutableState<T> : State<T> {
    override var value: T
    operator fun component1(): T
    operator fun component2(): (T) -> Unit
}

MutableState 내부를 살펴보면 두개의 operator fun 이 있다. 첫번째는 mutableState 내부의 값을 나타내는 component1()이고 둘째는 값이 들어왔을 때 내부의 값을 세팅하는 람다식이다.

 

우리는 이를 다음과 같이 쓸 수 있다.

val (textState, setTextState) = mutableStateOf("")

 

mutableState의 값(textState)과 세팅에 대한 function을 람다식(setTextState)로 따로 받을 수 있다.

 

따라서 코드를 다음과 같이 바꾸면 동작한다.

setContent {
    val (textState, setTextState) = remember { mutableStateOf("") }
    TextField(value = textState, onValueChange = setTextState)
}

최종 코드는 다음과 같다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val (textState, setTextState) = remember { mutableStateOf("") }
            TextField(value = textState, onValueChange = setTextState)
        }
    }
}

 

 

 

by 사용 (Delegation 사용)

MutableState의 getValue와 setValue에 대한 Delegation 또한 사용할 수 있다. 우리는 여기서 androidx.compose.runtime의 getValue와 setValue fun을 Delegation을 위해 사용한다.

그림3. delegation

MutableState을 by키워드와 함께 쓰게 되면 textState에 getValue와 setValue에 대한 위임(Delegation)이 일어난다. 여기서 주의할 점은 하나의 값에서 setValue또한 일어나야 하기 때문에 val이 아닌 var을 써야한다는 점이다.

var textState by mutableStateOf("") 

*만약 오류가 나면 아래 접은글을 보자!

더보기
안드로이드 스튜디오에서 by에 대한 import가 자동으로 안된다. 아래의 두개 import 구문을 위에 추가해주도록 하자.
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue

 

따라서 코드를 다음과 같이 바꾸면 동작한다. 

setContent {
    var textState by remember { mutableStateOf("") }
    TextField(value = textState, onValueChange = { textValue -> textState = textValue })
}

 

최종 코드는 다음과 같다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var textState by remember { mutableStateOf("") }
            TextField(value = textState, onValueChange = { textValue -> textState = textValue })
        }
    }
}
반응형
저작자표시 비영리 변경금지
  1. remember이란
  2. MutableState 다루기
  3. 구조 분해 사용
  4. by 사용 (Delegation 사용)


 

Kotlin, Android, Spring 사용자 오픈 카톡

오셔서 궁금한 점을 질문해보세요!
비밀번호 : kotlin22

open.kakao.com

'Android Jetpack Compose/Compose State' 카테고리의 다른 글
  • [Compose State] remember과 rememberUpdatedState를 사용한 상태 관리
  • [Android Compose State] State Hoisting(상태 호이스팅) 패턴이란 무엇인가?
  • [Jetpack Compose] State의 관점에서 본 Compose의 이해
Dev.Cho
Dev.Cho
'조세영의 Kotlin World'는 Kotlin를 전문적으로 다루는 개인 기술 블로그입니다. Kotlin 세계에 대한 양질의 자료를 제공하며 Kotlin, Android, Spring, CI, CD 분야에 대해 다룹니다.
Dev.Cho
조세영의 Kotlin World
Dev.Cho
전체
오늘
어제

블로그 메뉴

  • LinkedIn
  • GitHub
  • 분류 전체보기 (491)
    • Kotlin (104)
      • Class and Interface (19)
      • Variable and Function (8)
      • Modifier (5)
      • Collection (14)
      • Time (8)
      • 동시성 제어 (7)
      • Reactive Programming (2)
      • Paradigm (2)
      • Kotlin 자료구조 (15)
      • Design Patterns (11)
      • Algorithm (3)
      • Exception (1)
      • 기타 (9)
      • Update History (0)
    • Coroutines (32)
      • Coroutine Basics (18)
      • Flow (9)
      • CoroutineScope (3)
      • Debugging (2)
    • Testing Codes (28)
      • Test 기본 (3)
      • JUnit5 (9)
      • MockK (6)
      • Testing Coroutines (1)
      • Testing Android (8)
      • Test 기타 (1)
    • Spring (50)
      • Dependency Injection (18)
      • Settings (5)
      • REST API (0)
      • DevTools (1)
      • MVC (18)
      • Error (2)
      • MongoDB (2)
      • Database (4)
    • Android (39)
      • Architecture (2)
      • Component (5)
      • Manifest (1)
      • Lifecycle (2)
      • Dependency Injection (17)
      • Resource (1)
      • Storage (1)
      • Security and Optimization (1)
      • WebView (2)
      • Error (6)
    • Android Jetpack Compose (33)
      • Compose (6)
      • Compose Modifier (13)
      • Compose Resource (4)
      • Compose State (4)
      • Compose Side Effect (6)
    • Android Jetpack Compose UI (48)
      • Compose Layout (14)
      • Compose Text (10)
      • Compose Button (5)
      • Compose Dialog (2)
      • Compose TextField (0)
      • Compose UIs (4)
      • Compose Animation (1)
      • Compose Canvas (12)
    • Android Jetpack (10)
      • Datastore (5)
      • ViewModel (4)
      • LiveData (1)
      • Paging (0)
    • KMP (5)
    • Programming (4)
    • Machine (9)
      • JVM (7)
      • Linux (2)
    • CI, CD (74)
      • Gradle (12)
      • Groovy Gradle (5)
      • Git (25)
      • Git Remote (5)
      • GitHub (5)
      • GitHub Actions (21)
    • Network (33)
      • GraphQL (12)
      • HTTP (11)
      • Basic (9)
    • 오픈소스 (3)
    • Database (3)
      • MongoDB (3)
    • IDE (6)
      • Android Studio (2)
      • Intellij (4)
    • Firebase (1)
    • Javascript (9)

공지사항

  • 코틀린 코루틴 완전 정복 강의 in 인프런 오픈
  • 코틀린 코루틴의 정석 책 출간
  • Kotlin Coroutines 공식 기술 문서 한국어 번⋯
  • GitHub에서 조세영의 Kotlin World를 Foll⋯
  • 문의&제안

인기 글

태그

  • 스프링
  • 유닛 테스팅
  • Spring boot
  • Class
  • github actions
  • GIT
  • Kotlin
  • junit5
  • GraphQL
  • java
  • Android
  • 의존성 주입
  • HTTP
  • compose
  • gradle
  • Unit Testing
  • kotlin spring
  • dagger2
  • Jetpack Compose
  • github
  • Dependency Injection
  • 코틀린
  • junit
  • Coroutine
  • 코루틴
  • 안드로이드
  • junit4
  • Spring
  • Android Compose
  • flow

최근 글

반응형
hELLO · Designed By 정상우.v4.3.0
Dev.Cho
[Android Compose State] MutableState을 remember과 함께 다루는 다양한 방법 : 구조분해, by 키워드(Delegation) 사용
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.