[카카오T~픽커앱 개발기] state관리 Mavericks 에서 circuit까지

"유명한 Airbnb MVI프레임워크과 슬랙사의 Circuit을 카카오T와 픽커앱에 접목시킨 재미난 개발기 presentation layer에서 겪었던 상태 관리 프레임워크 적용기"

발표자 : roy.tk
카카오T픽커 android 공통개발을 담당하고 있는 roy입니다.

Transcript

2. 6*
   4UBUF
3. ֙
   ׼ݶೠ
   ޙઁ  ࠗࢲ݃׮
   ׮ܲ
   
   ޙࢲചغয
   ੓૑
   ঋ਷
   .77.
   ইఃఫ୛
   ୍೟
    TUBUF੄
   ઑഥ
   
   ࣻ੿ী
   ؀ೠ
   SBDF
   DPOEJUJPO  TUBUF
   ଵઑী
   ؀ೠ
   MJGFDZDMF
   য়ܨ
4. .BWFSJDLT "JS#OC੄
   .7*
   ইఃఫ୛
   ೐ۨ੐ਕ௼
5. .BWFSJDLT੄
   ੢੼  .7*  TJOHMF - TUBUF
   
   6OJEJSFDUJPOBM - %BUB - 'MPX  TUBUFী
   ؀ೠ
   ઑഥ
   
   ࣻ੿ਸ
   ױੌ
   UISFBE۽
   ъઁ  TUBUFী
   ؀ೠ
   ଵઑܳ
   ਤೠ
   FYUFOTJPO
   ӝמ
   ઁҕ  ڪযդ
   ޙࢲച
6. ஠஠য়5 ஠஠য়5೗ழ .BWFSJDLT੄
   بੑ
   TJODF
   
7. "OESPJE
   ѐߊ
   ౟۪٘੄
   ߸ച 3Y+BWB 7JFX $PSPVUJOF $PNQPTF
8. .BWFSJDLT੄
   ੢੼  .7*  TJOHMF - TUBUF
   
   6OJEJSFDUJPOBM - %BUB - 'MPX  TUBUFী
   ؀ೠ
   ઑഥ
   
   ࣻ੿ਸ
   ױੌ
   UISFBE۽
   ъઁ  TUBUFী
   ؀ೠ
   ଵઑܳ
   ਤೠ
   FYUFOTJPO
   ӝמ
   ઁҕ  ڪযդ
   ޙࢲച
9. ֙
   .BWFSJDLT੄
   ޙઁ੼  .7*  TJOHMF - TUBUF  TUBUFী
   ؀ೠ
   ઑഥ
   
   ࣻ੿ਸ
   ױੌ
   UISFBE۽
   ъઁ
    TUBUFী
   ؀ೠ
   ଵઑܳ
   ਤೠ
   FYUFOTJPO
   ӝמ
   ઁҕ  ڪযդ
   ޙࢲച DPSPVUJOFਵ۽
   औѱ
   оמ DPNQPTFܳ
   ੉ਊೞݶ
   औѱ
   оמ ࠛ೙ਃೞѱ
   ࠂ੟ೠ
   ೐ۨ੐ਕ௼
10. ֙
    ׼ݶೠ
    ޙઁ  ؊
    ࠂ੟ೠ
    ചݶ  ؊
    ࠂ੟೧૓
    ചݶ
    ੉ز  7JFX
    ->
    $PNQPTF۽੄
    ݃੉Ӓۨ੉࣌
11. ""$
    7.
    
    DPNQPTF੄
    ޙઁ੼  7.
    ࢤݺ઱ӝ৬
    DPNQPTF
    ࢤݺ઱ӝ੄
    ࠗઑച  ࠂ੟ೠ
    ചݶਸ
    ࠗ࠙੸ੋ
    ചݶਵ۽
    ଂѐӝ
    য۰਑  1BHFS
    #PUUPN4IFFU
    ߹۽
    7.ਸ
    ଂѐ۰ݶ
    GSBHNFOU
    о
    ೙ਃ  పझ౴ਸ
    য۵ѱ
    ݅ٝ
12. $JSDVJU ""$
    7.হ੉
    DPNQPTF۽
    ҳࢿغח
    7.
13. $JSDVJU੄
    ౠ૚  .7*  TJOHMF - TUBUF
    
    6OJEJSFDUJPOBM - %BUB - 'MPX  DPNQPTF - SVOUJNF
    ӝ߈੄
    TUBUFҙܻ  TDSFFOױਤ੄
    OBWJHBUJPO
    ӝמ
    ૑ਗ
14. $JSDVJU੄
    ҳࢿਃࣗ 1SFTFOUFS 6* TUBUF FWFOU $JSDVJU 4DSFFO
15. 4DSFFO data class CounterScreen(val initialCount: Int) : Screen data class DetailScreen(val id: Long) : Screen
16. 1SFTFOUFS @Composable fun CounterPresenter(screen: CounterScreen, navigator: Navigator): CounterScreen.State { var count by remember(screen) { mutableStateOf(screen.initialCount) } return CounterScreen.State( count = count, eventSink = { event -> when (event) { is CounterScreen.Event.GoTo -> navigator.goTo(event.target) is CounterScreen.Event.Increment -> count++ is CounterScreen.Event.Decrement -> count-- } }, ) }
17. 1SFTFOUFS @Composable fun CounterPresenter(screen: CounterScreen, navigator: Navigator): CounterScreen.State { var count by remember(screen) { mutableStateOf(screen.initialCount) } return CounterScreen.State( count = count, eventSink = { event -> when (event) { is CounterScreen.Event.GoTo -> navigator.goTo(event.target) is CounterScreen.Event.Increment -> count++ is CounterScreen.Event.Decrement -> count-- } }, ) }
18. 1SFTFOUFS @Composable fun CounterPresenter(screen: CounterScreen, navigator: Navigator): CounterScreen.State { var count by remember(screen) { mutableStateOf(screen.initialCount) } return CounterScreen.State( count = count, eventSink = { event -> when (event) { is CounterScreen.Event.GoTo -> navigator.goTo(event.target) is CounterScreen.Event.Increment -> count++ is CounterScreen.Event.Decrement -> count-- } }, ) }
19. 1SFTFOUFS @Composable fun CounterPresenter(screen: CounterScreen, navigator: Navigator): CounterScreen.State { var count by remember(screen) { mutableStateOf(screen.initialCount) } return CounterScreen.State( count = count, eventSink = { event -> when (event) { is CounterScreen.Event.GoTo -> navigator.goTo(event.target) is CounterScreen.Event.Increment -> count++ is CounterScreen.Event.Decrement -> count-- } }, ) }
20. 1SFTFOUFS @Composable fun CounterPresenter(screen: CounterScreen, navigator: Navigator): CounterScreen.State { var count by remember(screen) { mutableStateOf(screen.initialCount) } return CounterScreen.State( count = count, eventSink = { event -> when (event) { is CounterScreen.Event.GoTo -> navigator.goTo(event.target) is CounterScreen.Event.Increment -> count++ is CounterScreen.Event.Decrement -> count-- } }, ) }
21. 6* @Composable fun CounterUi(state: CounterScreen.State, modifier: Modifier = Modifier) { Column(modifier = modifier) { Text(text = "Count: ${state.count}") Button(onClick = { state.eventSink(CounterScreen.Event.Increment) }) { Text("+") } Button(onClick = { state.eventSink(CounterScreen.Event.Decrement) }) { Text("-") } } }
22. 6* @Composable fun CounterUi(state: CounterScreen.State, modifier: Modifier = Modifier) { Column(modifier = modifier) { Text(text = "Count: ${state.count}") Button(onClick = { state.eventSink(CounterScreen.Event.Increment) }) { Text("+") } Button(onClick = { state.eventSink(CounterScreen.Event.Decrement) }) { Text("-") } } }
23. -JOLJOH class CounterActivity : AppCompatActivity() { private val circuit: Circuit = Circuit.Builder() .addPresenter<CounterScreen, CounterScreen.State> { screen, navigator, _ -> presenterOf { CounterPresenter(screen, navigator) } } .addUi<CounterScreen, CounterScreen.State> { state, modifier -> CounterUi(state, modifier) } .build() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CircuitCompositionLocals(circuit) { CircuitContent(CounterScreen) } } } }
24. -JOLJOH class CounterActivity : AppCompatActivity() { private val circuit: Circuit = Circuit.Builder() .addPresenter<CounterScreen, CounterScreen.State> { screen, navigator, _ -> presenterOf { CounterPresenter(screen, navigator) } } .addUi<CounterScreen, CounterScreen.State> { state, modifier -> CounterUi(state, modifier) } .build() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CircuitCompositionLocals(circuit) { CircuitContent(CounterScreen) } } } }
25. -JOLJOH class CounterActivity : AppCompatActivity() { private val circuit: Circuit = Circuit.Builder() .addPresenter<CounterScreen, CounterScreen.State> { screen, navigator, _ -> presenterOf { CounterPresenter(screen, navigator) } } .addUi<CounterScreen, CounterScreen.State> { state, modifier -> CounterUi(state, modifier) } .build() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CircuitCompositionLocals(circuit) { CircuitContent(CounterScreen) } } } }
26. -JOLJOH class CounterActivity : AppCompatActivity() { private val circuit: Circuit = Circuit.Builder() .addPresenter<CounterScreen, CounterScreen.State> { screen, navigator, _ -> presenterOf { CounterPresenter(screen, navigator) } } .addUi<CounterScreen, CounterScreen.State> { state, modifier -> CounterUi(state, modifier) } .build() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CircuitCompositionLocals(circuit) { CircuitContent(CounterScreen) } } } }
27. ੿ܻ 1SFTFOUFS 6* TUBUF FWFOU $JSDVJU 4DSFFO
28. ੗ਬ۽਍
    #BDL4UBDL
    ஶ౟܀  #BDL4UBDL
    
    
    DPO fi HVSBUJPO
    ߸҃ীب
    ਬ૑غח
    4DSFFO
    ੄
    झఖਸ
    ੷੢  /BWJHBUPS
    
    #BDL4UBDL
    ী
    ؀ೠ
    ױࣽೠ
    JOUFSGBDFܳ
    ઁҕ  /BWJHBCMF$JSDVJU$POUFOU
    
    #BDL4UBDL੄
    UPQ
    TDSFFOਸ
    ֢୹ setContent { val backStack = rememberSaveableBackStack(root = HomeScreen) val navigator = rememberCircuitNavigator(backStack) NavigableCircuitContent(navigator, backStack) }
29. ੗ਬ۽਍
    #BDL4UBDL
    ஶ౟܀  #BDL4UBDL
    
    
    DPO fi HVSBUJPO
    ߸҃ীب
    ਬ૑غח
    4DSFFO
    ੄
    झఖਸ
    ੷੢  /BWJHBUPS
    
    #BDL4UBDL
    ী
    ؀ೠ
    ױࣽೠ
    JOUFSGBDFܳ
    ઁҕ  /BWJHBCMF$JSDVJU$POUFOU
    
    #BDL4UBDL੄
    UPQ
    TDSFFOਸ
    ֢୹ setContent { val backStack = rememberSaveableBackStack(root = HomeScreen) val navigator = rememberCircuitNavigator(backStack) NavigableCircuitContent(navigator, backStack) }
30. ੗ਬ۽਍
    #BDL4UBDL
    ஶ౟܀  #BDL4UBDL
    
    
    DPO fi HVSBUJPO
    ߸҃ীب
    ਬ૑غח
    4DSFFO
    ੄
    झఖਸ
    ੷੢  /BWJHBUPS
    
    #BDL4UBDL
    ী
    ؀ೠ
    ױࣽೠ
    JOUFSGBDFܳ
    ઁҕ  /BWJHBCMF$JSDVJU$POUFOU
    
    #BDL4UBDL੄
    UPQ
    TDSFFOਸ
    ֢୹ setContent { val backStack = rememberSaveableBackStack(root = HomeScreen) val navigator = rememberCircuitNavigator(backStack) NavigableCircuitContent(navigator, backStack) }
31. ੗ਬ۽਍
    #BDL4UBDL
    ஶ౟܀ @Composable fun HomePresenter(..., navigator: Navigator): HomeScreen.State { ... return HomeScreen.State(...) { event -> when (event) { is HomeScreen.Event.ShowAddFavorites -> navigator.goTo(AddFavoritesScreen(externalId = event.id) ... } } }
32. $JSDVJU
    OBWJHBUJPO
    ੄
    ੢੼  #BDL4UBDLী
    ؀ೠ
    ૒੽੸ੋ
    ੽Ӕ
    оמ  ழझథೠ
    #BDL4UBDL
    ઑ੘੉
    औ׮  ౠ੿
    fl PXী
    ؀ೠ
    OFTUFE
    CBDLTUBDL
    ҳഅ੉
    औ׮
33. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX "VUI4DSFFO
34. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF 6/"65)03*;&% "VUI4DSFFO 3PPU4DSFFO PCTFSWF
35. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX "VUI4DSFFO 6TFS4UBUF 6/"65)03*;&% ,BLBP-PHJO4DSFFO 3PPU4DSFFO
36. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX "VUI4DSFFO 6TFS4UBUF 6/"65)03*;&% ,BLBP-PHJO4DSFFO +PJO"HSFFNFOU4DSFFO 3PPU4DSFFO
37. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF 6/"65)03*;&% ,BLBP-PHJO4DSFFO +PJO"HSFFNFOU4DSFFO +PJO4VCNJU4DSFFO 3PPU4DSFFO "VUI4DSFFO
38. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF 6/"65)03*;&% ,BLBP-PHJO4DSFFO +PJO"HSFFNFOU4DSFFO +PJO4VCNJU4DSFFO +PJO 3PPU4DSFFO "VUI4DSFFO
39. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF ,BLBP-PHJO4DSFFO +PJO"HSFFNFOU4DSFFO +PJO4VCNJU4DSFFO +PJO 3PPU4DSFFO "65)03*;&% "VUI4DSFFO
40. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF ,BLBP-PHJO4DSFFO +PJO"HSFFNFOU4DSFFO +PJO4VCNJU4DSFFO +PJO 3PPU4DSFFO "65)03*;&% "VUI4DSFFO
41. ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX /PSNBM4DSFFO 6TFS4UBUF "65)03*;&% .BJO4DSFFO 3PPU4DSFFO
42. "65)03*;&% ஠஠য়5೗ழ
    ۽Ӓੋ
    fl PX 6TFS4UBUF .BJO4DSFFO /PUJDF4DSFFO 3PPU4DSFFO /PSNBM4DSFFO
43. ஠஠য়5೗ழ
    ର۝١۾
    fl PX /PSNBM4DSFFO .BJO4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO
44. ஠஠য়5೗ழ
    ର۝١۾
    fl PX 'MFFU4DSFFO /PSNBM4DSFFO .BJO4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO
45. ஠஠য়5೗ழ
    ର۝١۾
    fl PX 5ZQF4FMFDU4DSFFO /PSNBM4DSFFO .BJO4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO 'MFFU4DSFFO
46. ஠஠য়5೗ழ
    ର۝١۾
    fl PX -JDFOTF1MBUF4DSFFO 'MFFU4DSFFO /PSNBM4DSFFO .BJO4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO 5ZQF4FMFDU4DSFFO
47. ஠஠য়5೗ழ
    ର۝١۾
    fl PX .BJO4DSFFO 4VCNJU4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO /PSNBM4DSFFO 'MFFU4DSFFO -JDFOTF1MBUF4DSFFO 5ZQF4FMFDU4DSFFO
48. ஠஠য়5೗ழ
    ର۝١۾
    fl PX .BJO4DSFFO 4VCNJU4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO /PSNBM4DSFFO 'MFFU4DSFFO -JDFOTF1MBUF4DSFFO 5ZQF4FMFDU4DSFFO
49. ஠஠য়5೗ழ
    ର۝١۾
    fl PX .BJO4DSFFO 4FSWJDF"DUJWBUJPO4DSFFO /PSNBM4DSFFO
50. $JSDVJU੄
    ޙઁ
    ೧Ѿ  1SFTFOUFS
    ৬
    6*੄
    ੌҙػ
    MJGFDZDMF  DPNQPTF
    MFWFMীࢲ
    ੗୓੸ੋ
    CBDLTUBDL
    ҳࢿ  !DPNQPTBCMF
    ೣࣻ
    ೞա۽
    ࢶ঱غח
    QSFTFOUFS
    
    VJ  1SFTFOUFS
    పझ౟
    ௏٘
    ੘ࢿ
    ਊ੉
51. ೐ۨ੐ਕ௼ܳ
    ߄ۄࠁח
    ҙ੼ ޙઁ
    ೧Ѿਸ
    ਤೠ
    بҳ
52. хࢎ೤פ׮