“MVI \ub294 \uc0c1\ud0dc\ub97c \uc27d\uac8c \uad00\ub9ac\ud574\uc900\ub2e4\uad6c blah blah…”<\/p>\n<\/blockquote>\n\n\n\n
Compose \ub3c4\uc785 \uc774\uc804\uc5d0\ub294 \uadf8\ub550 \uc0c1\ud0dc \uad00\ub9ac\ub97c \ud06c\uac8c \uc911\uc694\ud558\uac8c \uc0dd\uac01\ud558\uc9c0 \uc54a\uc558\ub2e4. \uc544\ub2c8 \uc5b4\uca4c\uba74 \uad00\ub9ac\uac00 \uc5c9\ub9dd\uc778\ub370 \uc798 \uad00\ub9ac\ub418\uace0 \uc788\ub2e4\uace0 \ubbff\uace0 \uc788\uc5c8\ub098\ubcf4\ub2e4.<\/p>\n\n\n\n
Compose\ub97c \uc4f0\uba74\uc11c UI\uac00 \uac31\uc2e0\ub418\uc9c0 \uc54a\uac70\ub098 Recomposition\uc774 \ube48\ubc88\ud558\uac8c \ubc1c\uc0dd\ud558\ub294 \uac83\uc744 \ud655\uc778\ud588\ub2e4. \uadf8\ub7ec\uace0 \ub098\uc11c\uc57c \uc0c1\ud0dc\uac00 \uad00\ub9ac\ub418\uc9c0 \uc54a\uc73c\uba74 \uc571\uc758 \ud488\uc9c8\uc774 \ub5a8\uc5b4\uc9c0\uace0 \ud37c\ud3ec\uba3c\uc2a4\uac00 \uc800\ud558 \ub420 \uc218 \uc788\ub2e4\ub294 \uac83\uc744 \uae68\ub2ec\uc558\ub2e4.<\/p>\n\n\n\n
\uc571\uc758 \uc0c1\ud0dc\ub294 \uc2dc\uac04\uc758 \ud750\ub984\uc5d0 \ub530\ub77c \ub2e4\uc74c\uacfc \uac19\uc774 \ub2e4\uc591\ud558\uac8c \ubcc0\uacbd\ub420 \uc218 \uc788\ub2e4. <\/p>\n\n\n\n
- \n
- \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0\uc774 \ub04a\uc5b4\uc84c\uc744 \ub54c \ud45c\ud604\ub418\ub294 \uc2a4\ub0b5\ubc14<\/li>\n\n\n\n
- \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc5d0 \uc758\ud574 \uc791\uc131\ub418\ub294 \ud14d\uc2a4\ud2b8<\/li>\n\n\n\n
- \ud2b9\uc815 \uc2dc\uac04\uc5d0 \uc6b8\ub9ac\ub294 \uc54c\ub78c\uc18c\ub9ac<\/li>\n<\/ul>\n\n\n\n
\uc77c\ubc18\uc801\uc73c\ub85c \uc774 \ubd84\uc57c\uc5d0\uc11c \uc0c1\ud0dc(state)\ub77c \ud568\uc740 \ud074\ub798\uc2a4 \uc624\ube0c\uc81d\ud2b8\uc758 \uc5b4\ub5a0\ud55c \uac12 \ub610\ub294 \ub370\uc774\ud130\ub2e4. \uc608) ViewModel \uac1d\uccb4\uc5d0 \uc120\uc5b8\ub418\uc5b4\uc788\ub294 State
Compose\uc758 \uc5c5\ub370\uc774\ud2b8\ub294 \uc0c1\ud0dc\uc758 \ubcc0\uacbd\uc5d0 \uc758\ud574\uc11c \uc774\ub8e8\uc5b4\uc9c0\uba70 \uc774\ub97c \uc7ac\uad6c\uc131(Recomposition)\uc774\ub77c\uace0 \ud55c\ub2e4.
Compose\ub97c \ub3c4\uc785\ud55c \uc774\ud6c4, \uac1c\ubc1c\uc790\ub294 \ub354 \uc774\uc0c1 View\uc5d0 \uc811\uadfc\ud574\uc11c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \uc218\uace0\ub97c \ub35c\uc5c8\uc73c\uba70 \uadf8\uc800 ‘\uc0c1\ud0dc \uad00\ub9ac’\uc5d0\ub9cc \uc9d1\uc911\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\nMVI\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n\n\n\n
MVC, MVP \ub610\ub294 MVVM \ucc98\ub7fc MVI\ub3c4 \uad00\uc2ec\uc0ac\ub97c \ub098\ub204\uace0 \ud574\ub2f9 \uad00\uc2ec\uc0ac\uc758 \uc55e\uae00\uc790\ub97c \ub530\uc11c \ub9cc\ub4e0 \ud328\ud134\uc774\ub2e4.<\/p>\n\n\n\n
Model<\/strong>: UI\uc5d0 \ubc18\uc601\ub420 \uc0c1\ud0dc<\/strong>\ub97c \uc758\ubbf8\ud55c\ub2e4. \uadf8\ub7ec\ubbc0\ub85c MVP \ub610\ub294 MVVM \ubaa8\ub378\uc758 \uc815\uc758\uc640\ub294 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n
View<\/strong>: UI \uadf8 \uc790\uccb4\ub2e4. View, Activity, Fragment, Compose \ub4f1\uc774 \ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Intent<\/strong>: \uc0ac\uc6a9\uc790 \uc561\uc158 \ubc0f \uc2dc\uc2a4\ud15c \uc774\ubca4\ud2b8\uc5d0 \ub530\ub978 \uacb0\uacfc<\/p>\n\n\n\n
\uc77c\ubc18\uc801\uc73c\ub85c \uc774 Model, View, Intent\uc758 \uc0c1\uad00\uad00\uacc4\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc21c\uc218\ud568\uc218 \ud615\uc2dd\uc73c\ub85c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2022\/12\/www.charlezz.com-android-mvi--2022-12-28--11.03.23-1024x546.png\")
<\/figure>\n\n\n\n\uc608\ub97c \ub4e4\uc5b4\ubcf4\uc790\uba74, \uc0ac\uc6a9\uc790\uac00 View\ub97c \ud074\ub9ad\ud574\uc11c \ud654\uba74 \ubaa9\ub85d\uc744 \uac31\uc2e0\ud558\uace0\uc790 \ud55c\ub2e4. \ubaa9\ub85d\uc744 \uac31\uc2e0\ud558\uace0\uc790 \ud558\ub294 \uc758\ub3c4(Intent)\uac00 \uacb0\uad6d \uc0c8\ub85c\uc6b4 \ubaa8\ub378, \uc989 \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\uac8c \ub418\uace0 \uc774\uac83\uc774 View(\uc77c\ubc18\uc801\uc73c\ub85c Compose)\uc5d0 \ubc18\uc601\ub41c\ub2e4.<\/p>\n\n\n\n
MVI\ub294 \ub2e8\ubc29\ud5a5 \ud750\ub984(Uni-directional flow) \uad6c\uc870\ub2e4. \uadf8\ub807\uae30 \ub54c\ubb38\uc5d0 \ub2e4\uc74c \uadf8\ub9bc\ucc98\ub7fc \ud45c\ud604\ud558\uae30\ub3c4 \ud55c\ub2e4.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2022\/12\/www.charlezz.com-android-mvi--2022-12-28--11.07.28-1018x1024.png\")
<\/figure>\n\n\n\n\uc0ac\uc6a9\uc790\uc758 \uc561\uc158\uc774 \uc0c8\ub85c\uc6b4 Intent\ub85c \ubcc0\uacbd\ub418\uace0, \ud574\ub2f9 Intent\ub85c \ubd80\ud130 \uc0c8\ub85c\uc6b4 Model\uc744 \ub9cc\ub4e4\uc5b4 View\ub97c \uac31\uc2e0\ud558\ub294 \ud750\ub984\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
MVI\uc5d0\uc11c Model\uc740 \uc0c1\ud0dc\ub97c \ud45c\ud604\ud558\ub294 \ubcc0\uacbd \ubd88\uac00\ud55c<\/strong> \ub370\uc774\ud130\ub2e4. \uc571\uc758 \uc0c1\ud0dc\ub294 \ub2e8\ubc29\ud5a5 \ud750\ub984\uc5d0\uc11c Intent\ub85c\ubd80\ud130 Model\uc744 \uc0dd\uc131\ud560 \ub54c\ub9cc \uc0c8\ub85c\uc6b4 Model \uac1d\uccb4\ub97c \uc0dd\uc131\ud55c\ub2e4. \uc774\ub7ec\ud55c \uad6c\uc870\ub85c \uc778\ud574 \uc6b0\ub9ac\ub294 \uc608\uce21\uac00\ub2a5\ud558\ub3c4\ub85d \uc0c1\ud0dc\ub97c \uc124\uc815\ud560 \uc218 \uc788\uace0 \uc774\ub85c \uc778\ud574 \ub514\ubc84\uae45\uc774 \uc26c\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n
\ub9cc\uc57d \ub2f9\uc2e0\uc774 MVVM\uc744 \uc0ac\uc6a9\ud574\uc654\ub2e4\uba74, MVI\ub294 \uc804\ud600 \uc0c8\ub85c\uc6b4 \uac83\uc774 \uc544\ub2c8\uba70 \uc774\ub97c \uc704\ud574 \uc804\uccb4\ub97c \ubcc0\uacbd\ud560 \ud544\uc694\ub294 \uc5c6\ub2e4. VM(View Model)\uc740 \uc0c1\ud0dc\uac00 \uad00\ub9ac\ub418\uae30 \uc704\ud574 \uc88b\uc740 \uc7a5\uc18c\uc774\uba70 \ub2e4\uc774\uc5b4\uadf8\ub7a8\uc73c\ub85c \ub098\ud0c0\ub0b4\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2022\/12\/www.charlezz.com-android-mvi--2022-12-28--11.14.22-1024x578.png\")
<\/figure>\n\n\n\n\uc704 \uadf8\ub9bc\uc740 MVVM \uacc4\uce35 \uad00\uc810\uc5d0\uc11c MVI\uac00 \uc5b4\ub290 \uacc4\uce35\uc5d0 \uc18d\ud558\ub294\uc9c0 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n
MVI \uc608\uc81c\ucf54\ub4dc1<\/h2>\n\n\n\n
\ub2e4\uc74c \uc608\uc81c\ucf54\ub4dc\ub294 Event \ubc1c\uc0dd -> State \ubcc0\uacbd -> View \ubc18\uc601 \uc21c\uc11c\ub85c MVI \ud328\ud134\uc744 \uad6c\ud604\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n
Event\ub294 Increment\uc640 Decrement\ub85c \ub098\ub258\uba70 \uc774\ub294 \uac01\uac01 State.count \uac12\uc744 1\uc529 \uc99d\uac00 \ub610\ub294 \uac10\uc18c \uc2dc\ud0a8\ub2e4.<\/p>\n\n\n\n
class ViewModel(){\n\n private val _state = MutableStateFlow<\/em>(State())\n val state:StateFlow<State> = _state\n\n override suspend fun onEvent(event<\/em>: Event) {\n when (event<\/em>) {\n is Event.Increment -> {\n _state.value = _state.value.copy(count = _state.value.count + 1)\n }\n <\/strong>is Event.Decrement -> {\n _state.value = _state.value.copy(count = _state.value.count - 1)\n }\n <\/strong>}\n }\n}<\/pre>\n\n\n\n\ud558\uc9c0\ub9cc \uc774 \ucf54\ub4dc\ub294 \uc2a4\ub808\ub4dc\uc5d0 \uc548\uc804\ud558\uc9c0 \uc54a\ub2e4<\/strong>. onEvent\uac00 \uc11c\ub85c \ub2e4\ub978 \uc2a4\ub808\ub4dc\uc5d0\uc11c \ud638\ucd9c\ub420 \uacbd\uc6b0 \ub3d9\uc2dc\uc131 \uc774\uc288\uac00 \ubc1c\uc0dd\ud558\uae30 \ub54c\ubb38\uc774\ub2e4. <\/p>\n\n\n\n
\uc2e4\uc81c \uc11c\ub85c \ub2e4\ub978 \uc2a4\ub808\ub4dc\uc5d0\uc11c onEvent(Increment)\uc640 onEvent(Decrement)\ub97c 10\ub9cc\ubc88\uc529 \ud638\ucd9c\ud574\ubcf4\uba74 0\uc774 \uc544\ub2cc \uac12\uc774 \ub098\uc62c \ud655\ub960\uc774 \ub192\ub2e4. (\uc7ac\ud604 \uac00\ub2a5\ud55c \ud14c\uc2a4\ud2b8 \ucf54\ub4dc<\/a>)<\/p>\n\n\n\n
\ub4e4\uc5b4\uc624\ub294 \uc774\ubca4\ud2b8\ub85c\ubd80\ud130 _state.update{…} \ub97c \ud1b5\ud574 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\b\ud558\uba74 \ub3d9\uc2dc\uc131 \uc624\ub958\ub294 \ud574\uacb0\ud560 \uc218 \uc788\uc9c0\ub9cc, MVI\ud328\ud134\uc744 \uad6c\ud604\ud558\uae34 \uc704\ud55c \uadfc\ubcf8\uc801\uc778 \ud574\uacb0\ubc29\ubc95\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
MVI \uc608\uc81c\ucf54\ub4dc2<\/h2>\n\n\n\n
\ub3d9\uc2dc\uc131 \uc624\ub958\ub97c \ud68c\ud53c\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc774 \ucf54\ub4dc\ub97c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
class ViewModel {\n\n private val events = Channel<\/em><Event>()\n\n private val _state = MutableStateFlow<\/em>(State())\n\n val state:StateFlow<State> = MutableStateFlow<\/em>(State())\n\n init {\n events.receiveAsFlow<\/em>()\n .onEach<\/em>(::updateState)\n .launchIn<\/em>(viewModelScope)\n }\n\n override suspend fun onEvent(event<\/em>: Event) {\n events.send(event<\/em>)\n }\n\n private fun updateState(event<\/em>: Event) {\n when (event<\/em>) {\n is Event.Increment -> {\n _state.value = _state.value.copy(count = _state.value.count + 1)\n }\n <\/strong>is Event.Decrement -> {\n _state.value = _state.value.copy(count = _state.value.count - 1)\n }\n <\/strong>}\n }\n}<\/pre>\n\n\n\nChannel\uc744 \ub3c4\uc785\ud558\uc5ec \uc774\ubca4\ud2b8\ub97c \uc21c\ucc28\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\uac8c \ub054 \ubcc0\uacbd\ud588\ub2e4. \uc774\ub85c \uc778\ud574 \uc2a4\ub808\ub4dc \uc548\uc815\uc131\uc774 \ubcf4\uc7a5\ub41c\ub2e4.<\/p>\n\n\n\n
\ud558\uc9c0\ub9cc \uc774 \uc608\uc81c\ucf54\ub4dc\uc5d0\ub3c4 \ud55c\uac00\uc9c0 \uc544\uc26c\uc6b4 \uc810\uc774 \uc874\uc7ac\ud558\ub294\ub370, updateState \ud568\uc218 \ubc16\uc5d0\uc11c\ub3c4 _state\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc774\ub2e4. <\/p>\n\n\n\n
MVI \uc608\uc81c\ucf54\ub4dc3 (State Reducer)<\/h2>\n\n\n\n
\n
Reducer = (State, Event) -> State<\/strong><\/p>\n<\/blockquote>\n\n\n\n
Reducer\ub780 \ud604\u001d\uc7ac\uc758 \uc0c1\ud0dc\uc640 \uc804\ub2ec \ubc1b\uc740 \uc774\ubca4\ud2b8\ub97c \ucc38\uace0\ud558\uc5ec \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\ub97c \ub9cc\ub4dc\ub294 \uac83\uc744 \ub9d0\ud55c\ub2e4. Reducer\ub97c \ud1b5\ud574 \uc608\uc81c\ucf54\ub4dc2<\/em>\uac00 \uac00\uc9c0\uace0 \uc788\ub358 \ubb38\uc81c\uc810\uc744 \ud574\uacb0\ud574\ubcf4\uc790.<\/p>\n\n\n\n
class ViewModel {\n\n private val events = Channel<\/em><Event>()\n\n \/\/ State Reducer<\/strong>\n val state = events.receiveAsFlow<\/em>()\n .runningFold<\/em>(State(), ::reduceState<\/strong>)\n .stateIn<\/em>(viewModelScope, SharingStarted.Eagerly, State())\n\n override suspend fun onEvent(event<\/em>: Event) {\n events.send(event<\/em>)\n }\n\n private fun reduceState(current<\/em>: State, event<\/em>: Event): State {\n return when (event<\/em>) {\n is Event.Increment -> current<\/em>.copy(count = current<\/em>.count + 1)\n is Event.Decrement -> current<\/em>.copy(count = current<\/em>.count - 1)\n }\n }\n}<\/pre>\n\n\n\n\uc774\ubca4\ud2b8 \ucc44\ub110\ub85c\ubd80\ud130 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\uae30 \ub54c\ubb38\uc5d0 \uc774\uc81c \ub354 \uc774\uc0c1 \uc678\ubd80\uc5d0\uc11c \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \uc694\uc778\uc740 \uc5c6\ub2e4. \uc0c1\ud0dc \uad00\ub9ac\ub97c \ud55c\uacf3\uc5d0\uc11c \ud560 \uc218 \uc788\uac8c \ub418\uba74\uc11c Race Condition\uc744 \ubc30\uc81c \uc2dc\ud0a4\uace0, \uc0c1\ud0dc\ub97c \uc608\uce21\ud558\uae30 \uc27d\uace0, \ub514\ubc84\uae45\uc744 \uc218\uc6d4\ud558\uac8c \ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4.<\/p>\n\n\n\n
MVI \uc7a5\ub2e8\uc810 \uc815\ub9ac<\/h2>\n\n\n\n
\uc9c0\uae08\uae4c\uc9c0 \uc124\uba85\ud55c \ub0b4\uc6a9\uc73c\ub85c \uc7a5\ub2e8\uc810\uc744 \uc815\ub9ac\ud574\ubcf4\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
\uc7a5\uc810<\/h3>\n\n\n\n
- \n
- \uc0c1\ud0dc \uad00\ub9ac\uac00 \uc27d\ub2e4<\/li>\n\n\n\n
- \ub370\uc774\ud130\uac00 \ub2e8\ubc29\ud5a5\uc73c\ub85c \ud750\ub978\ub2e4.<\/li>\n\n\n\n
- \uc2a4\ub808\ub4dc \uc548\uc815\uc131\uc744 \ubcf4\uc7a5\ud55c\ub2e4.<\/li>\n\n\n\n
- \ub514\ubc84\uae45 \ubc0f \ud14c\uc2a4\ud2b8\uac00 \uc27d\ub2e4<\/li>\n<\/ul>\n\n\n\n
\ub2e8\uc810<\/h3>\n\n\n\n
- \n
- \ub7ec\ub2dd\ucee4\ube0c\uac00 \uac00\ud30c\ub974\ub2e4<\/li>\n\n\n\n
- \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc\uac00 \uc591\uc0b0\ub41c\ub2e4.<\/li>\n\n\n\n
- \uc791\uc740 \ubcc0\uacbd\ub3c4 Intent\ub85c \ucc98\ub9ac \ud574\uc57c\ud55c\ub2e4.<\/li>\n\n\n\n
- Intent, State, Side Effect \ub4f1 \ubaa8\ub4e0 \uc0c1\ud0dc\uc5d0 \ub300\ud55c \uac1d\uccb4\ub97c \uc0dd\uc131\ud574\uc57c \ud558\ubbc0\ub85c \ud30c\uc77c \ubc0f \uba54\ubaa8\ub9ac \uad00\ub9ac<\/strong>\uc5d0 \uc720\uc758\ud574\uc57c \ud55c\ub2e4.<\/li>\n<\/ul>\n\n\n\n
\uc2e4\uc804 \uc608\uc81c – \uc0ac\uc6a9\uc790 \ubaa9\ub85d \ubd88\ub7ec\uc624\uae30<\/a><\/h2>\n\n\n\n