Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
선언형 UI가 대세임을 선언합니다
Search
HyunWoo Lee
April 01, 2023
Programming
0
960
선언형 UI가 대세임을 선언합니다
Compose 학습부터 실제 적용까지
HyunWoo Lee
April 01, 2023
Tweet
Share
More Decks by HyunWoo Lee
See All by HyunWoo Lee
파급효과: From AI to Android Development
l2hyunwoo
0
200
선언형 UI에서의 상태관리
l2hyunwoo
0
480
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
410
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
1.3k
React Native under the hood
l2hyunwoo
0
110
유연한 Composable 설계
l2hyunwoo
0
660
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
120
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
420
CDG로 모두와 함께 성장하기
l2hyunwoo
0
190
Other Decks in Programming
See All in Programming
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
16
2.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
15
4.6k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Ace a Technical Interview
jacobian
278
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Done Done
chrislema
184
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
선언형 UI가 대세임을 선언합니다 Compose 학습부터 실제 적용까지 이현우 Mathpresso
Inc. Android/React Native Developer
Compose, Ӓ द যڃ ҅ӝ۽ Composeܳ द೮חо? যڌѱ ҕࠗܳ ೮חо?
#Android Dev Challenge
#Android Dev Challenge
Compose 걸음마 떼기 Compose가 Stable Release 된 이후 Devfest Codelab과
같은 커뮤니티 스터디를 활용하여 Compose Codelab을 간단하게나마 훑어보기 QANDA에 도입된 Compose 코드와 디자인 시스템 코드를 활용하여 Compose UI/디자인 이해하기
Am I Stuck? Compose۽ ೞա জਸ ٜ݅যաт ٸ Compose۽ ೞա
ӝמ ઁೡ ٸ Compose Codelab ݃ச ٸ
React Native <- > Jetpack Compose React Native 개발을 하면서
알게 된 지식 Jetpack Compose에서 사용되는 지식
사이드 프로젝트에 적용해보기
Why Compose? Declarative UI/Recomposition State Hoisting
선언형 UI
선언형 UI State에 맞춰서 UI가 그려진다 개발자가 직접 State를 설정할
필요가 없어져 Human Error의 가능성이 현저히 떨어짐 Android Composable 함수들의 호출로 새로운 UI Component가 만들어짐 빠르게 본인이 원하는 형태의 UI를 그릴 수 있음
Recomposition Composable 함수를 구성하는 State가 변경될 때, Composable을 갱신시키는 것
Recomposition
Recomposition
Smart Recomposition
Smart Recomposition Smart Recomposition이 보장되어있지 않다
@ Stable Use @ Stable annotation to make skippable state
@ Immutable, @ StableMarker Use @ StableMarker annotations to make
skippable state
State Hoisting State -> UI 공통적으로 사용하는 State는 최소 공통
조상 LCA 에게 할당
Side Effect Declarative UI Function & Side Effect
선언형 UI F STATE = UI 함수는 상태 STATE 에
따라 UI를 그려주는 액션을 취함
그렇다면… F STATE = UI 그러면 UI를 그려주는 동작 이외의
것들은?
Side Effect Composable 함수의 목적 UI 렌더링 이외의 앱 상태의
변경사항
React React Native 에서는?
React React Native 에서는? 학생들의 정보를 DataSource 서버, 로컬 저장소
등 에서 가져오기 위한 함수
React React Native 에서는? classId가 변하는 경우에만 위의 함수를 호출한다
Dependency Key Dependency Array가 비어있는 경우, UI Component가 올라왔을 때 한 번만 호출
React React Native 에서는? UI Component가 화면에 올라올 때 함수가
호출됨
React React Native 에서는? UI Component가 화면에서 안 보일 때
자동으로 함수가 종료됨
React React Native 에서는? 매 Re rendering Recomposition 마다 호출
그럼 Compose에서는? 함수 scope 내에서 suspend function 호출 가능
LaunchedEffect useEffect에서 Dependency Array가 비어있는 경우 => Composable 함수가 처음
불릴 때 호출
LaunchedEffect useEffect에서의 Dependency Array => isSuccess, progress가 변경되면 내부 호출
DisposableEffect isSuccess, progress가 변경될 때에만 호출
DisposableEffect isSuccess, progress가 변경될 때에만 호출 Composable이 화면에서 안보일경우 자동으로
해제
SideEffect 매 Recomposition마다 호출함
이외에도 produceState derivedStateOf snapshotFlow rememberCoroutineScope
Conclusion And Then…
F STATE = UI
F STATE = UI Compose로 UI 구현하기 Layout/Modifier/Animation Style Design
System
F STATE = UI UI 상태 관리하기 State/State Hoisting/Architecture Layering
CompositionLocal
F STATE = UI App 품질 관리/유지보수 Performance Recomposition/Stability Side
Effect/Architecture Layering Testing/Accessibility
Compose Your Self
Compose, Your Development
이현우 Mathpresso Inc. Android/React Native Developer