선언형 UI에서의 상태관리

Transcript

1. Incheon ࢶ঱ഋ UIীࢲ੄ ࢚కҙܻ - Circuitҗ Rinਸ ઺बਵ۽ ੉അ਋ Android/React

   Native Developer, Viva Republica(Toss) Organizer, Kotlin User Groups Seoul/GDG Incheon

2. ࢚కҙܻ੄ ѐ֛җ ৉ࢎ ݾର ҙܻೡ “࢚క” ঌইࠁӝ ૑৉ ࢚క ઑӘ

   ؊ ੜ ҙܻ ೧ࠁӝ

3. Speakerdeck Youtube ࢶ঱ഋ UI ೨बѐ֛

4. ࢚కҙܻ੄ ѐ֛җ ৉ࢎ

5. Before Compose class SampleActivity: AppCompatActivity() { private var name =

   "" override fun onCreate(bundle: SavedInstanceState?) { super.onCreate(bundle) // ࢲߡాन APIService.getMyName().enqueue(object: Callback { override fun onResponse(ޤदӽ੉) { name = response.body().name updateUi() // binding.tv.text = name } }) } }

6. Before Compose • ѐߊ੗о ૒੽ ߸ࣻܳ ߸҃ೞҊ UI੄ ࢚కܳ ߸҃ೞب۾

   ௏٘ܳ ੘ ࢿ೧ঠೣ • ߸ࣻо ചݶ੄ ߸҃ਸ दఃחؘ ઺ਃبо ڄয૗ • ചݶਸ ߸҃ೞח Ѫ਷ ߸ࣻ ч੉ ইצ ѐߊ੗

7. Before Compose - DataBinding class SampleActivity: AppCompatActivity() { private val

   viewModel by viewModels() private lateinit var binding: ActivitySampleBinding override fun onCreate(bundle: SavedInstanceState?) { super.onCreate(bundle) binding = DataBindingUtil.setContentView(this, R.layout.ui) binding.viewModel = viewModel } } <layout> <data> <variable name=“vm” type=“com.sample.ViewModel” /> </data> <TextView <!— ࢤۚ —> android:text=“@{vm.user.nam e}” /> </layout>

8. Data Binding ߸ࣻܳ ߸҃݅ ೧ب ചݶ੄ ࢚కо ߸҃ؽ ߸ࣻо ചݶ੄

   “࢚క”о غب۾ ࢸ҅ ߑೱ੉ ߸҃ ૊, ചݶ੄ ࢚క ߸҃ ઱୓о ѐߊ੗ীࢲ दझమਵ۽ ੹بؽ ঑ب੸ੋ ࠽٘ఋ੐ ࢚थҗ ೧ةೞӝ য۰਍ ী۞ झఖ ౟ۨ੉झ Data Binding -> View Bindingਵ۽ ֈযоח ୶ࣁ Ӓۢীب ࠛҳೞҊ ѐߊ੗о ചݶ੄ ߸ࣻо “࢚క”۽ ੋधೞѱ ػ ୐ ࣁ؀

9. Compose بੑ ੉റ @Composable fun SampleText() { var text by

   remember { mutableStateOf("") } LaunchedEffect(Unit) { text = APIService.getName().await() } TextField(value = text, text = it }) }

10. Compose ߸ࣻܳ ߸҃݅ ೧ب ചݶ੄ ࢚కо ߸҃ؽ ୶о੸ੋ ࠽٘ కझ௼

    হ੉ ߸ࣻо ചݶ੄ ࢚కо ؽ

11. Compose ߸ࣻо ചݶ੄ ࢚క੉׮ Android Developers - Ui State

12. ࢚క ખ ؊ ੗ࣁ൤ ঌইࠁӝ

13. ࢚కо ޤ৘ਃ? UIܳ ಴അೞח ݽٚ ؘ੉ఠ

14. ࢚కҙܻо ޤ৘ਃ? UIܳ ಴അೞח ݽٚ ؘ੉ఠ ܳ ҙܻೞח ߑߨۿ

15. ࢤпࠁ׮ ҙܻ೧ঠೡ ࢚క੄ ઙܨח ׮নೞ׮ ഥਗоੑ ੑ۱ Form • ੉ܴ/੉ݫੌ

    ઱ࣗ/࠺޻ߣഐ ١ ੑ۱ UI • ੉ݫੌ઱ࣗ ઺ࠂ ৈࠗ • ࠺޻ߣഐ Ѩૐ • ࠺޻ߣഐ ഛੋҗ ࠺޻ߣഐ ੌ஖ ৈࠗ • ডҙ ز੄

16. ࢤпࠁ׮ ҙܻ೧ঠೡ ࢚క੄ ઙܨח ׮নೞ׮

17. ࢚కҙܻ੄ Key Point ؘ੉ఠܳ য٣ী, যڌѱ ਤ஖दఃחо?

18. ੹৉࢚క৬ ૑৉࢚క

19. ੹৉࢚క৬ ૑৉࢚క ࢚కо ־ҳীѱ ҕਬغҊ ੓חо ೞա੄ ஹನք౟ && ੗ध

    ஹನք౟ٜীѱ ҕਬ - ૑৉࢚క ੹୓ ஹನք౟ٜ੉ ࢎਊೡ ࣻ ੓ѱ ҕਬ - ੹৉࢚క

20. ੹৉ ࢚క(Global State) @Composable fun TodoTheme( darkTheme: Boolean = false,

    content: @Composable () -> Unit ) { val colors = todoColors() val typography = TodoTypography() ProvideTodoColorAndTypography(colors, typography){ MaterialTheme(content = content) } }

21. উ٘۽੉٘ীࢲ ੹৉࢚కҙܻ

22. উ٘۽੉٘ীࢲ ੹৉࢚కҙܻ

23. Configuration Change CompositionLocal۽ ੹׳غח ч੉ ੹৉ী ੹౵غפө Config Change۽ ч੉

    ࠛউ੿೧૑ݶ ੹୓ ஹನք౟ী ৔ೱ -> জ উ੿ࢿ ੷ೞ ೐۽ࣁझ ࢤݺ઱ӝী উ੿੸ਵ۽ ؘ੉ఠ ੷੢द ਊ۝ ޙઁ rememberSavableਸ ഝਊೞݶ 1MB ੉ղ۽ ؘ੉ఠܳ ੷੢೧ঠೞחؘ ਗೞח ݅ఀ੄ ؘ੉ఠܳ ੷੢ਸ ೞ׮о ৘࢚஖ ޅೠ Exception੉ ఠ૕ ࣻ ੓਺ উ٘۽੉٘ীࢲ ੹৉࢚కҙܻ

24. ੹৉࢚కҙܻ Android OS: ॄب જ਷ؘ, ੸׼൤ ॄۄ

25. ૑৉࢚క ੜ ҙܻೞӝ

26. ؀ࠗ࠙੄ ૑৉࢚కҙܻ ViewModel ❤

27. ੿݈ ViewModelী ֍חѱ ୭ࢶ? Configuration Changeী ٮۄࢲ ч੉ ߸҃೧ঠೡ ࣻ

    ੓਺ ѓ۟द Fold৬ э਷ ҃਋ ੽ਵݶ Phone UI, ಟ஖ݶ Tablet UI ࠁৈ઻ঠೞח ா੉ झ ߊࢤ, ੉۠ ؘ੉ఠܳ Config Change উ੿੸੉ѱ فݶ য়൤۰ ী۞ ߊࢤ ׮ܲ ஹನք౟ٜী ࠛ೙ਃೠ ੿ࠁܳ ֈѹ п ё୓ח ޻੽ೞѱ ҙ҅ػ ׮ܲ ё୓ٜী ؀೧ࢲ ઁೠػ ૑ध݅ਸ оઉঠ ೠ׮. (Law of Demeter)
28. None

29. StateHolder Class @Stable class NiaAppState( val navController: NavHostController, coroutineScope: CoroutineScope,

    networkMonitor: NetworkMonitor, userNewsResourceRepository: UserNewsResourceRepository, timeZoneMonitor: TimeZoneMonitor, ) { private val previousDestination = mutableStateOf<NavDestination?>(null) ……

30. StateHolder Class @Composable fun rememberNiaAppState( … ): NiaAppState { return

    remember { NiaAppState( navController = navController, coroutineScope = coroutineScope, networkMonitor = networkMonitor, userNewsResourceRepository = userNewsResourceRepository, timeZoneMonitor = timeZoneMonitor, )

31. State Holder https://developer.android.com/topic/architecture/ui-layer/ stateholders

32. Circuit ନݡೞӝ

33. Circuit? Circuit is a simple, lightweight, and extensible framework for

    building Kotlin applications that’s Compose from the ground up.

34. Circuit? Circuit਷ рױೞҊ о߶਋ݴ ഛ੢ оמೠ ೐ۨ੐ਕ௼۽, A-Zө૑ Compose݅ਸ ഝਊೞৈ

    Kotlin গ೒ܻா੉࣌ਸ ҳ୷ೡ ࣻ ੓णפ׮.

35. Circuit? ࢚కҙܻ ߑध݅ਸ ઱۽ ੉ঠӝ ೞӝ ٸޙী ജ҃ࢸ੿ ١ ҳഅী

    ೙ਃೠ ࣁࠗࢎ೦ٜ਷ ઁ৻ೞ৓णפ׮

36. Circuit?

37. Circuit?

38. Circuit੄ рױೠ ҳઑب

39. Screen data class CounterScreen(val initialCount: Int): Screen data class DetailScreen(val

    id: Long): Screen data class FavoriteScreen: Screen

40. CircuitUiState, CircuitUiEvent sealed inte rf ace State : CircuitUiState {

    data object Loading : State data object NoFavorites : State data class Results( val list: List<Favorite>, val eventSink: (Event) -> Unit ) : State } sealed inte rf ace Event : CircuitUiEvent { data class ClickFavorite(id: Long): Event }

41. @Composable fun CounterPresenter(): CounterState { var count by rememberSaveable {

    mutableStateOf(0) } return CounterState(count) { event -> when (event) { CounterEvent.Increment -> count++ CounterEvent.Decrement -> count-- } } } Presenter

42. @Composable fun CounterPresenter(): CounterState { var count by rememberRetained {

    mutableStateOf(0) } return CounterState(count) { event -> when (event) { CounterEvent.Increment -> count++ CounterEvent.Decrement -> count-- } } } Presenter

43. rememberRetained

44. // CircuitUiState੄ ఋੑ expo rt inte rf ace CounterState {

    value: number } // CircuitUiState ୡӝ ё୓ const initialState: CounterState = { value: 0, } Redux Toolkitҗ Presenter

45. // Circuit੄ presenter expo rt const counterSlice = createSlice({ name:

    'counter', // Updateغח state initialState, reducers: { // event ੿੄ ࠗ࠙ increment: (state) => { state.value += 1 }, decrement: (state) => { state.value -= 1 } } ) Redux Toolkitҗ Presenter

46. @CircuitInject(FavoriteScreen::class, ActivityRetainedComponent::class) @Composable fun FavoritesList(state: FavoritesScreen.State) { when (state) {

    Loading -> Text(text = stringResource(R.string.loading_favorites)) NoFavorites -> Text( modi fi er = Modi fi er.testTag("no favorites"), text = stringResource(R.string.no_favorites) ) is Results -> { LazyColumn { items(state.list) { Favorite(it, state.eventSink) } } } } } Screen

47. Circuitী ؀ೠ рۚೠ ࣗх • ؀ഋ জҗ э਷ ҃਋, ఋੑ/ҳഅী

    ؀ೠ ӏઁٜ੉ ౱੉ ࢤ࢑ೞח ௏ ٘੄ ాੌࢿҗ оةࢿਸ ֫ৈ઴ ࣻ ੓਺ • Unit Testب рױೞѱ ੘ࢿೡ ࣻ ੓਺ • Compose runtimeਸ ഝਊ೧ࢲ ߈਽ഋ ࢚కܳ ઁ੘ೡ ࣻ ੓׮ח Ѫী ௾ ੄੄

48. Circuitী ؀ೠ рۚೠ ࣗх • ੉Ѧ ੸ਊೡ ࣻ ੓ח ഥࢎо

    ݻ੉ա ੓ਸө? • ׮নೠ بҳٜ(Flow, Rx, Legacy View ١)җ interopਸ ೡ ࣻ ੓૑݅, ੉ܳ interopೞӝ ਤ೧ ٘ח ݆ࣻ਷ ҕٜࣻਸ ࢤп೧ঠؽ • ъઁ۽ ҳഅ/ࢎਊ೧ঠೞח Ѫٜ(Presenter, Navigator ١)੉ ݆ই पઁ۽ ೐۽؋࣌ী ੸ਊؼ݅ೠ૑ח ੄ޙ

49. @Composable fun ScreenA() { var isB by rememberRetained { mutableStateOf(true)

    } rememberRetained{ "A" } if(isB) { rememberRetained{ "B" } } else { rememberRetained{ "C" } } } takahirom/Rin

50. উ٘۽੉٘ীࢲ੄ ࢚కҙܻ ੹৉࢚క৬ ૑৉࢚క ૑৉࢚కܳ ࠁ׮ ؊ ੜ ҙܻೠ ߑߨ

    Summary

51. Thank you Incheon HyunWoo Lee Android(React Native) Developer, Viva Republica(Toss)