Android Compose composition and recomposition
사용 언어: Kotlin 1.9.10
사용 버전: Android Studio Giraffe 2022.3.1 Patch 2
그리고 이러한 것들은 State라는 것에 의해 관리되는데요.
오늘은 composition, recomposition, state를 자세히 알아봅시다.
출처:
https://developer.android.com/jetpack/compose/state
사용 버전: Android Studio Giraffe 2022.3.1 Patch 2
안드로이드 Compose composition and recomposition을 알아보겠습니다.
Compose(컴포우즈)에는 composition(컴포지션)과 recomposition(리컴포지션)이 존재합니다.그리고 이러한 것들은 State라는 것에 의해 관리되는데요.
오늘은 composition, recomposition, state를 자세히 알아봅시다.
출처:
https://developer.android.com/jetpack/compose/state
기본 프로젝트는 여기서 받을 수 있습니다.
Compose는 state(상태)를 관리합니다. data가 업데이트되면 최신 state로 업데이트합니다.
왜냐하면 Compose는 data를 UI로 변경하기 때문이죠.
아래 코드를 봅시다.
67번째 줄의 TextInput을 봅시다.
TextField의 value와 onValueChange는 state의 최신화를 일으킵니다.
코드를 추가해 봅시다.
68번째 줄처럼 inputText 변수를 만들어서 value와 onValueChange에 넣습니다.
실행해 봅시다.
실행했는데 이상하게 글자가 입력되지 않습니다.
Composition에 대한 이해가 필요한 부분입니다.
• Composition
코드로 설명된 UI가 Compose에 의해 UI로 보이는 것을 말합니다.
• Initial composition
처음 생성될 때 실행되는 composition을 말합니다.
• Recomposition
state가 업데이트될 때 다시 실행되는 composition을 말합니다.
즉, 처음 Composition 될 때 inputText가 들어가는데, 키보드 입력으로 onChange에서 inputText를 변경합니다.
그러면 Recomposition이 발생합니다. InputText Composable 함수가 다시 실행되어 inputText는 "Hi, 안녕."으로 초기화됩니다.
우리에게 필요한 것은 Recomposition이 발생해도 값이 초기화되지 않고 이전 값이 유지되는 기능입니다.
이때 사용하는 것이 remember입니다.
72 번째 줄처럼 by remember를 사용합니다.
73 번째 줄처럼 mutableStateOf를 줍니다.
mutableStateOf는 해당 변수를 compose가 관찰하도록 합니다.
remember
mutableStateOf
실행해 봅시다.
이제, 해야 할 것은 Input: 영역에 위에 적은 내용이 들어가게 만들어야 합니다.
여기서 알아야 할 개념은 Stateful, Stateless 그리고 State hoisting입니다.
Composable 함수 내부에 remember을 사용하여 state를 관리한다면 stateful(스테이트풀)이라고 말합니다.
현재 우리가 만든 TextInput은 stateful 상태입니다.
Stateless(스테이스러스)는 아무런 state를 가지고 있지 않은 상태를 말합니다. 우리는 state hoisting(스테이트 호이스팅)을 사용하여 TextInput을 stateless 하게 만들 수 있습니다.
그러면 멀정한 Stateful 함수를 왜 Stateless로 만들까요?
그건 바로, State가 공유되어야 할 때입니다.
아래는 현재 우리 상황입니다.
inputText를 TextOutput에서 참조해야 하지만, TextInput 안에 들어있는 상황입니다.
이럴 때 사용하는 게 state hoisting입니다.
Hoisting을 하면 아래처럼 변합니다.
inputtext를 밖으로 꺼냅니다.
TextInput은 Stateless가 됩니다.
TextOutput은 이제 inputText를 참조할 수 있습니다.
코드로 한 번 해봅시다.
inputText와 onValueChange를 parameter로 변경합니다.
상위 TextInputAndTextOutput에 inputText를 정의합니다. 그리고 TextInput에 parameter로 전달합니다.
65번째 줄처럼 TextOutput에도 parameter로 전달합니다.
TextOutput은 다음과 같이 정의합니다.
카테고리: Android, Compose
댓글
댓글 쓰기
궁금한 점은 댓글 달아주세요.
Comment if you have any questions.