Android Compose composition and recomposition

사용 언어: Kotlin 1.9.10
사용 버전: 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



세계적인 앱 개발자(The World class application developer)
반구저기(反求諸己)

댓글

댓글 쓰기

궁금한 점은 댓글 달아주세요.
Comment if you have any questions.

이 블로그의 인기 게시물

Python OpenCV 빈 화면 만들기

이미지
사용 버전: Python 3.7.6, OpenCV 4.2.0 ​ 파이썬 OpenCV 빈 화면 만들기를 해보겠습니다. ​ 검정 빈 화면을 만들기 위해서는 numpy가 필요합니다. ​ img1의 경우는 color로 불러들었을 때를 위한 빈 화면이고, img2의 경우는 grayscale로 불러들었을 때의 빈 화면입니다. ​ 끝. 카테고리: Python, cv2
자세히 보기 »

Python urllib.parse.quote()

이미지
사용 버전: Python 3.6.8 사용 프로그램: Atom 1.40.1 x64 ​ 파이썬 urllib.parse.quote()에 대해서 알아보겠습니다. 괄호 안에는 string, safe, encoding, errors 인자가 들어갑니다. ​ urllib.parse.quote()는 아스키코드 형식이 아닌 글자를 URL 인코딩 시켜줍니다. ​ String 인자에는 string, bytes 형식이 들어갑니다. String 형식. Bytes 형식 Safe 인자에는 URL encoding에서 제외할 문자를 넣습니다. 기본으로 '/'이 설정되어 있습니다. Encoding 인자에는 인코딩 이름이 들어갑니다.  string에 들어가는 문자와 맞지 않으면 오류가 나옵니다. 기본적으로 'utf-8'이 들어갑니다. Error 인자에는 'strict', 'ignore', 'replace', 'xmlcharrefreplace', 'backslashreplace', 'namereplace', 'surrogateescape', 'surrogatepass'가 들어갑니다. 기본적으로 strict가 설정되어 있습니다. unicode 오류를 알려줍니다. Ignore의 경우 오류는 무시하고, 변환할 수 있는 것만 변환합니다. Replace는 에러 글자를 '?'로 변환해줍니다. 그리고 quote(
자세히 보기 »

Python bytes.fromhex()

이미지
사용 버전: Python 3.6.8 사용 프로그램: Atom 1.38.2 x64 ​ 파이썬 bytes.fromhex()에 대해서 알아보겠습니다. 괄호 안에는 bytes 형식으로 바꿀 hex 숫자가 들어갑니다. ​ bytes.fromhex()은 hex 숫자에 '\x'를 붙여 bytes 형식으로 변형합니다. 끝. 카테고리: Standard Library, Python
자세히 보기 »

Android AVD Ram size change

이미지
사용 버전: Android Studio 4.1.1 사용 언어: Kotlin 1.4.20 ​ 안드로이드 AVD Ram size change를 해보겠습니다. ​ 안드로이드에는 AVD(Android Virtual Device)라는 가상 기기를 제공해 줍니다. 해당 가상 기기의 램 크기를 변경해보도록 하겠습니다. ​ AVD Manager에 들어갑니다. 아래의 창이 나옵니다. 아래로 향한 화살표를 눌러 Show on Disk를 누릅니다. 폴더가 하나 열립니다. config.ini 파일을 찾아 메모장 파일로 엽니다. hw.ramSize를 변경합니다. ​ ​ ​ 저는 3072로 변경했습니다. 저장합니다. ​ ​ 다시 AVD Manager로 돌아와서 연필 모양을 누릅니다. Show Advanced Settings를 누릅니다. RAM 영역을 보면, 아까 입력한 3072로 변경된 것을 확인할 수 있습니다. 끝. 카테고리: Android
자세히 보기 »

Forensics .pyc 파일 .py로 복구하기

이미지
사용 버전: Python 3.7 운영 체제: Windows 10 Home x64 1909 사용 도구: Uncompyle6 ​ 포렌식 .pyc 파일 .py로 복구하기에 대해서 알아보겠습니다. ​ 만약 여러분이 파이썬 파일을 지워버렸는데, .pyc 파일은 남아있다면 다시 복구할 수 있습니다. ​ 보통 .pyc 파일은 수동으로 만들지 않는 이상 main 함수가 남아있지는 않습니다. 자동 생성되는 경우는 다른 python script를 참조할 때, 참조한 script가 pyc로 생성합니다. ​ uncompyle6를 설치합니다. python -m pip install uncomply6 ​ 저는 해당 .pyc 파일을 사용하겠습니다. 아래 git에 들어가면 동일한 파일을 사용할 수 있습니다. https://github.com/shwoghk14/mnist_tensorflow/tree/master/Start%204/__pycache__ 사용법은 다음과 같습니다. cmd 창을 엽니다. ​ uncompyle6 [복구할 .pyc 파일 이름] 완료되면, 다음과 같이 원본 py 내용이 나옵니다. ​ uncompyle6 version python bytecode 버전 python 버전 file name compiled 날짜 Size 등의 중요한 정보와 함께 원본 python script가 출력됩니다. ​ 해당 파일의 원본은 mnist_util.py입니다. 비교해 보시면 좋을 것 같네요. https://github.com/shwoghk14/mnist_tensorflow/tree/master/Start%204 ​ 끝. 카테고리: forensic [계수기] 앱 광고 외국: Hand Counter https://play.google.com/store/apps/details?id=starlight.jaehwa.handcounter 계수기 앱. 하나씩 개수를 셀 때 사용해보세요.
자세히 보기 »

Android Minimum touch target size

이미지
사용 언어: Kotlin 1.7.10 사용 버전: Android Studio Chipmunk 2021.2.1 Patch 1 ​ Android Minimum touch target size를 알아보겠습니다. ​ 사용자의 사용성을 위해서 구글에서는 안드로이드 터치 영역 크기를 최소한 이 정도는 해야 한다고 권고하고 있습니다. ​ https://support.google.com/accessibility/android/answer/7101858 바로 48dp x 48 dp 크기입니다. 해당 크기가 사용성을 고려했을 때 최소한의 크기입니다. 이것보다 크기가 작다면 경고를 볼 수 있습니다. 아래는 layout 파일에서 볼 수 있는 경고 창입니다. 현재 터치 영역의 크기가 30dp x 30dp이므로 이것을 48dp x 48dp로 만들라고 알려주고 있습니다. ​ ​ 끝. 카테고리: Android
자세히 보기 »

KiCad 시작하기 7 (FreeRoute 사용하기 2)

이미지
사용 버전: Kicad 5.1.4 ​ 저번 시간에 이어서 Freeroute를 사용해보겠습니다. ​ 각 PCB 제조사마다 디자인 룰이란 것이 존재합니다. 우리는 그것에 맞추어서 선이나 구멍을 만들어줘야 합니다. ​ 디자인 룰 설정을 합시다. 우선 PCB Layout Editor을 실행합니다. 파일 - Board Setup을 누릅니다. Design Rules - Net Classes를 누릅니다. 위의 창에서 디자인 룰을 설정합니다. '+'를 눌러 디자인 룰을 새롭게 만들든지, 기존의 Default를 변경하든지 편하신 대로 조정해줍니다. ​ 유격: 선과 선 사이 간격 트랙 두께: 선 굵기 Via Size: Via 납 지름 비아 드릴: Via 구멍 지름 uVia Size: 모름 uVia Drill: 모름 dPair Width: 모름 dPair Gap: 모름 ​ ​ 저는 Power Class를 추가하여, +5V와 GND에 Assign To Selected Nets로 한꺼번에 적용시켰습니다. 나머지 전선은 Default Class 적용을 받고, +5V와 GND만 Power class 적용을 받습니다. ​ Ctrl + S로 저장을 한 번 해줍니다. 파일 - 내보내기 - Specctra DSN... 을 눌러줍니다. 적당한 위치에 dsn 파일을 저장합니다. NetBeans에서 Autoroute를 실행합니다. Open Your Own Design을 눌러, 아까 저장한 dsn 파일을 불러옵니다. Autorouter를 눌러줍니다. 전선 긋기, 최적화하기 순으로 진행되고, 완료가 되면, Postroute completed라는 문구가 나옵니다.전선 긋기나 최적화 중 마우스 왼쪽 버튼을 누르면, 그 상태로 정지됩니다. 최적화가 필요 없으면, 정지 후 바로 PCB에 사용하셔도 됩니다. File - Export Specctra S
자세히 보기 »

Android Notification with Full Screen

이미지
사용 버전: Android Studio 4.1.1 사용 언어: Kotlin 1.4.20 ​ 안드로이드 Notification with Full Screen을 알아보겠습니다. ​ 알람이나 전화 같은 경우 사용자에게 큰 화면으로 Notification을 보여줘야 합니다. 이때 사용하는 게, FullScreenIntent입니다. ​ ​ 기본 Notification이 필요합니다. https://shwoghk14.blogspot.com/2020/09/android-notification.html FullScreen으로 띄울 Activity를 하나 만듭니다. 저는 FullScreenNoonActivity로 만들었고 모습은 아래와 같습니다. 위의 Activity를 이용하여 NotificationCompat.Builder가 있는 곳에 fullScreenIntent를 만듭니다. setContentIntent는 설정할 필요 없습니다. setFullScreenIntent를 설정합니다. priority는 PRIORITY_HIGH가 필요합니다. 그리고 Android 10 이상의 경우 권한이 필요합니다. AndroidManifest.xml에 USE_FULL_SCREEN_INTENT를 추가합니다. 실행해봅시다. 분명 FullScreenIntent로 실행했음에도 Heads-up Notification이 나옵니다. 눌러봅시다.
자세히 보기 »

C++ OpenCV 모폴로지 침식, 팽창

이미지
사용 버전: OpenCV 4.5.2 사용 프로그램: Microsoft Visual Studio 2019 16.9.4 ​ openCV 모폴로지 침식, 팽창하는 법을 알아보겠습니다. ​ 영상의 팽창은 흰색 픽셀을 늘리는 역할을 합니다. 영상의 침식은 흰색 픽셀을 줄이는 역할을 합니다. 영상의 열기는 침식 후, 팽창을 실행하여 노이즈를 어느 정도 제거합니다. 영상의 닫기는 팽창 후, 침식을 실행하여 홀을 어느 정도 제거합니다. ​ 사용할 이미지는 다음과 같습니다. 침식(Erosion)을 하기 위해서는 erode() 함수를 사용합니다. 괄호 안에는 InputArray(src), OutputArray(dst), InputArray(kernel), Point(anchor), int(iterations), int(borderType), const Scalar(&borderValue) 따위가 들어갑니다. ​ src에는 원본 영상이 들어갑니다. dst에는 출력 영상이 저장될 Mat이 들어갑니다. kernel은 침식 영상을 만드는데 사용할 커널입니다. Mat()을 사용하면 기본 내장 커널을 사용합니다. anchor는 커널에서 값이 추출될 곳인데, 기본은 (-1, -1)로 가운데를 가리킵니다. iterations는 반복할 횟수입니다. borderType은 커널이 닿지 않는 가장자리 부분에 대한 정의입니다. 기본으로 BORDER_CONSTANT를 사용합니다. borderValue는 커널이 닿지 않는 가장자리 부분에 대한 값 정의입니다. 기본으로 morphologyDefaultBorderValue()를 사용합니다. 기본 커널로 5
자세히 보기 »

KiCad 시작하기 2 (PCB 만들기)

이미지
사용 버전 : KiCad 5.1.0 ​ kicad PCB 만들기에 대해서 알아보겠습니다. ​ 'PCB Layout Editor'를 눌러줍니다. 만약 아래와 같은 알림 창이 뜬다면, 선택은 자유입니다. 내용은 그래픽 카드를 사용할 것인지, 말것인지 입니다. 쓰면 속도도 좋고, 부드러워진다고 설명하고 있군요. 다음과 같은 창이 뜹니다. 'Update PCB from schematic'을 눌러줍니다. 'Match Method'와 설정을 적절히 선택해줍니다.(저처럼 하셔도 됩니다.) 그리고 'Update PCB'를 눌러줍니다. 다음과 같이 마우스를 따라다니는, footprint가 생성됩니다. 적당한 곳에 클릭합니다. footprint 이동은 '키보드 M', footprint 회전은 '키보드 R'입니다. 'Hide board ratsnest'를 켜면, 전선이 연결되어야 할 가이드 선이 표시됩니다. 'Ctrl + 좌 클릭'은 선택된 패드에 연결될 부분만 밝게 표시합니다. 해제 방법은 빈 땅에 'Ctrl + 좌 클릭'하면 됩니다. 옆에 있는 '레이어'는 PCB의 어느 영역에 그릴 것인지를 선택할 수 있게 해줍니다. F.Cu는 PCB 윗부분 전선 B.Cu는 PCB 뒷부분 전선 F.Paste는 PCB 윗부분 SMT 접착제 B.Paste는 PCB 뒷부분 SMT 접착제 F.Mask는 PCB 윗부분 패드 B.Mask는 PCB 뒷부분 패드 Edge.Cuts는 PCB의 전체 모양 F.SilkS는 PCB 윗부분 하얀 선 또는 글자 B.SilkS는 PCB 뒷부분 하얀 선 또는 글자 전선을 그려봅시다. 'Route tracks'를 눌러줍니다. 레이어를 보시면, F.Cu에 화살표가 있으니, 전선은 F.Cu 레이어에 그려집니다
자세히 보기 »