Kotlin Sealed Class로 뷰상태 관리

Kotlin Sealed Class를 이용한
뷰상태 관리
Speaker.우명인

Index
• 뷰 상태?
• 상태가 왜 중요한데?
• 어떻게 개선하는데?
• 지속적인 개선

뷰 상태?
• 화면에 보여지는 것들은 상태가 있다고 말할 수 있다.

• 상태란 상황에 따라 변경 될수 있는 값을 말한다.
뷰 상태?

• 상태란 상황에 따라 변경 될수 있는 값을 말한다.
• Android는 상태값을 화면에 보여주는 프로그램이다.
뷰 상태?

그래서 상태가 왜 중요한데???

의도 하지 않은 유저경험 제공
상태가 왜 중요한데?

class MainActivity : AppCompatActivity() {
companion object {
const val RED = 1
const val GREEN = 2
const val BLUE = 3
}
var currentColor: Int = RED
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
bt_red.setOnClickListener {
onChangedCount(RED)
}
bt_green.setOnClickListener {
onChangedCount(GREEN)
}
bt_blue.setOnClickListener {
onChangedCount(BLUE)
}
}
private fun onChangedCount(color: Int) {
tv_color.text = "${getColorStr(currentColor)} -> ${getColorStr(color)}"
iv_color.setBackgroundColor(ContextCompat.getColor(this, when (color) {
MainViewModel.RED -> R.color.green
MainViewModel.GREEN -> R.color.green
MainViewModel.BLUE -> R.color.blue
else -> throw IllegalArgumentException("invalid color")
}))
currentColor = color
}
private fun getColorStr(color: Int): String = getString(when (color) {
MainViewModel.RED -> R.string.red
MainViewModel.GREEN -> R.string.green
MainViewModel.BLUE -> R.string.blue
})
}

companion object {
const val RED = 1
const val GREEN = 2
const val BLUE = 3
}
onChangedCount(RED)
}
}
}
}
}))
}
})
}
화면이 복잡해짐 ->

companion object {
const val RED = 1
const val GREEN = 2
const val BLUE = 3
}
onChangedCount(RED)
}
}
}
}
}))
}
})
}
화면이 복잡해짐 -> 상태가 많아짐 ->

companion object {
const val RED = 1
const val GREEN = 2
const val BLUE = 3
}
onChangedCount(RED)
}
}
}
}
}))
}
})
}
관리가 어려워짐 ->

companion object {
const val RED = 1
const val GREEN = 2
const val BLUE = 3
}
onChangedCount(RED)
}
}
}
}
}))
}
})
}
관리가 어려워짐 -> SideEffect가 발생하기 쉬움

crash 발생

companion object {
const val ITEM_A = 1
const val ITEM_B = 2
const val ITEM_C = 3
}
var currentItem: Int = ITEM_A
bt_a.setOnClickListener {
updateItem(ITEM_A)
currentItem = ITEM_A
}
bt_b.setOnClickListener {
updateItem(ITEM_B)
currentItem = ITEM_B
}
bt_c.setOnClickListener {
updateItem(ITEM_C)
currentItem = ITEM_C
}
}

private fun updateItem(item: Int) {
tv_item.text = "${getItemStr(currentItem)} -> ${getItemStr(item)}"
iv_item.setBackgroundColor(ContextCompat.getColor(this, when (item) {
ITEM_A -> R.color.red
ITEM_B -> R.color.green
ITEM_C -> R.color.blue
else -> throw IllegalArgumentException(“invalid item")
}))
}
private fun getItemStr(item: Int): String = getString(when (item) {
ITEM_A -> R.string.a
ITEM_B -> R.string.b
ITEM_C -> R.string.c
else -> throw IllegalArgumentException("invalid item”)
})

companion object {
}
updateItem(ITEM_A)
}
updateItem(ITEM_B)
}
updateItem(ITEM_C)
}
}
이게 어때서?

companion object {
}
updateItem(ITEM_A)
}
updateItem(ITEM_B)
}
updateItem(ITEM_C)
}
}
이게 어때서?
Activity가 상태를 관리

companion object {
}
updateItem(ITEM_A)
}
updateItem(ITEM_B)
}
updateItem(ITEM_C)
}
}
이게 어때서?
Activity가 상태를 관리
상태를 상수 값으로 관리

else -> throw IllegalArgumentException("invalid item")
}))
}
else -> throw IllegalArgumentException(“invalid item”)
})
이게 어때서?

}))
}
})
이게 어때서?

}))
}
})
이게 어때서?
Activity가 상태를 분기 해서 처리

}))
}
})
이게 어때서?
Activity가 상태를 분기 해서 처리
SideEffect가 발생 할 수 있다.

ItemD가 추가된다면?
companion object {
}

companion object {
const val ITEM_D = 4
}

bt_d.setOnClickListener {
updateItem(ITEM_D)
currentItem = ITEM_D
}

}))
}
})

ITEM_D -> R.color.black
}))
}
ITEM_D -> R.string.d
})

ItemN 이 계속 추가된다면?

ItemN 이 계속 추가된다
면?
companion object {
const val ITEM_D = 4
...
...
...
const val ITEM_N = N
}

면?
. . .
. . .
ITEM_N -> R.color.N
}))
}
. . .
. . .
ITEM_N -> R.string.n
})

• 상태만 추가하고 비즈니스 로직을 구현하지 않아도 컴파일에 문제가 없
면?

면?
• 런타임에 에러가 발생 할 수가 있다.

• ITEM_N 의 값 1, 2, 3, N은 의미가 없다.
면?

• 중복한 N이 작성 될수도 있다.
면?

• 중복한 N이 작성 될수도 있다.
• 요구 사항이 늘어 날 때마다 코드 전체가 영향을 받는다.
면?

MVP
어떻게 개선하는데?

companion object {
}
updateItem(ITEM_A)
}
updateItem(ITEM_B)
}
updateItem(ITEM_C)
}
}
else -> throw IllegalArgumentException(“invalid item")
}))
}
})
}

interface MainView {
fun onUpdatedItem(oldItem: Int, newItem: Int)
}

class MainPresenter(val view: MainView) {
companion object {
}
private var currentItem: Int = -1
fun onClicked(item: Int) {
view.onUpdatedItem(currentItem, item)
currentItem = item
}
}

class MainActivity : AppCompatActivity(), MainView {
val mainPresenter = MainPresenter(this)
mainPresenter.onClicked(ITEM_A)
}
mainPresenter.onClicked(ITEM_B)
}
mainPresenter.onClicked(ITEM_C)
}
}
override fun onUpdatedItem(oldItem: Int, newItem: Int) {
tv_item.text = "${getItemStr(oldItem)} -> ${getItemStr(newItem)}"
iv_item.setBackgroundColor(ContextCompat.getColor(this, when (newItem) {
}))
}
})
}

뭐가 개선 됐는데?
companion object {
}
currentItem = item
}
}
상태를 Presenter가 관리한다.

조금 더 개선해보자.
companion object {
}

enum class Item {
ITEM_A, ITEM_B, ITEM_C
}

enum class Item {
}
애매모호한 상수에서 명시적인 class로 변경

enum class Item {
}
설계 시 모든 상태를 알고 있다.

}))
}
})

override fun onUpdatedItem(oldItem: Item, newItem: Item) {
}))
}
private fun getItemStr(item: Item): String = getString(when (item) {
})

else가 필요 없다.
}))
}
})

enum class Item {
}

enum class Item {
ITEM_A, ITEM_B, ITEM_C, ITEM_D
}

}))
}
})

}))
}
})
컴파일 타임에 에러가 발생

}))
}
})

}))
}
})
설계 시 모든 상태를 알고 있다.
값만 추가 할 경우컴파일 타임에 에러가 발생.

enum class Item(val titleId: Int, val colorId: Int) {
ITEM_A(R.string.a, R.color.red),
ITEM_B(R.string.b, R.color.green),
ITEM_C(R.string.c, R.color.blue)
}

}
생성 시점에 상태가 가진 값을 알수 있다.

fun onUpdatedItem(oldItem: Int, newItem: Int)
}

fun onUpdatedItem(oldItem: Item, newItem: Item)
}

companion object {
}
currentItem = item
}
}

private var currentItem: Item = Item.ITEM_A
fun onClicked(item: Item) {
currentItem = item
}
}

mainPresenter.onClicked(ITEM_A)
}
mainPresenter.onClicked(ITEM_B)
}
mainPresenter.onClicked(ITEM_C)
}
}
}))
}
})
}

mainPresenter.onClicked(Item.ITEM_A)
}
mainPresenter.onClicked(Item.ITEM_B)
}
mainPresenter.onClicked(Item.ITEM_C)
}
}
tv_item.text = "${getString(oldItem.titleId)} -> ${getString(newItem.titleId)}"
iv_item.setBackgroundColor(ContextCompat.getColor(this, newItem.colorId))
}
}

}
}
}
}
tv_item.text = "${getString(oldItem.titleId)} -> ${getString(newItem.titleId)}"
iv_item.setBackgroundColor(ContextCompat.getColor(this, newItem.colorId))
}
}
View가 상태에 따른 처리를 하지 않아도 된다.

}

ITEM_C(R.string.c, R.color.blue),
ITEM_D(R.string.d, R.color.black)
}

}
}
}
}

}
}
}
bt_d.setOnClickListener {
mainPresenter.onClicked(Item.ITEM_D)
}
}

• enum class 추가와, 상태값 전달 코드만 추가구현 하면 된다.
면?

• Presenter(비즈니스 로직)는 변하지 않는다.
면?

• Presenter(비즈니스 로직)는 변하지 않는다.
• UI 업데이트 코드도 변하지 않는다.
면?

MVVM

class MainViewModel(val view: MainView) {
private var currentItem: Item by Delegates.observable(Item.ITEM_A,
{ _: KProperty<*>, oldItem: Item, newItem: Item ->
view.onUpdatedItem(oldItem, newItem)
})
currentItem = item
}
}

Delegates.observable?
})
currentItem = item
}
}

/**
* Returns a property delegate for a read/write property that calls a specified callback function when changed.
* @param initialValue the initial value of the property.
* @param onChange the callback which is called after the change of the property is made. The value of the property
* has already been changed when this callback is invoked.
*/
public inline fun <T> observable(initialValue: T, crossinline onChange: (property: KProperty<*>, oldValue: T, newValue: T) -> Unit):
ReadWriteProperty<Any?, T> = object : ObservableProperty<T>(initialValue) {
override fun afterChange(property: KProperty<*>, oldValue: T, newValue: T) = onChange(property, oldValue, newValue)
}

class User {
var name: String by Delegates.observable("<no name>") {
prop, old, new ->
println("$old -> $new")
}
}
fun main(args: Array<String>) {
val user = User()
}

class User {
prop, old, new ->
}
}
val user = User()
user.name = "first" //<no name> -> first
}

class User {
prop, old, new ->
}
}
val user = User()
user.name = "first" //<no name> -> first
user.name = "second" //first -> second
}

})
currentItem = item
}
}
상태값만 변경하면 View가 바뀜

DataStore 에서
Item 정보를 가져온다면?

DataStore 에서
}

DataStore 에서
fun showProgress()
fun hideProgress()
fun onError(throwable: Throwable?)
}

DataStore 에서
enum class ItemType {
}

DataStore 에서
val mainViewModel = MainViewModel(this, DataStore())
mainViewModel.requestItemInfo(ItemType.ITEM_A)
}
mainViewModel.requestItemInfo(ItemType.ITEM_B)
}
mainViewModel.requestItemInfo(ItemType.ITEM_C)
}
}
tv_item.text = "${oldItem.title} -> ${newItem.title}"
iv_item.setBackgroundColor(Color.parseColor(newItem.color))
}
}

DataStore 에서
val mainViewModel = MainViewModel(this, DataStore())
mainViewModel.requestItemInfo(ItemType.ITEM_A)
}
mainViewModel.requestItemInfo(ItemType.ITEM_B)
}
mainViewModel.requestItemInfo(ItemType.ITEM_C)
}
}
tv_item.text = "${oldItem.title} -> ${newItem.title}"
iv_item.setBackgroundColor(Color.parseColor(newItem.color))
}
override fun showProgress() {
pb_item.show()
}
override fun hideProgress() {
pb_item.hide()
}
override fun onError(throwable: Throwable?) {
TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
}
}

DataStore 에서
}

DataStore 에서
data class Item(val title: String, val color: String)

DataStore 에서
})
currentItem = item
}
}

DataStore 에서
class MainViewModel(val view: MainView, val dataStore: DataStore) {
private var currentItem: Item by Delegates.observable(Item("kotlin", "#FF0000"),
})
fun requestItemInfo(itemType: ItemType) {
view.showProgress()
try {
currentItem = dataStore.getItemInfo(itemType)
} catch (error: Throwable?) {
view.onError(error)
} finally {
view.hideProgress()
}
}
}

DataStore 에서
})
view.showProgress()
try {
view.onError(error)
} finally {
view.hideProgress()
}
}
}
비즈니스 로직에서 View를 업데이트하네?

sealed class NetworkState {
class Init : NetworkState()
class Loading : NetworkState()
class Success(val item: Item) : NetworkState()
class Error(val throwable: Throwable?) : NetworkState()
}

})
view.showProgress()
try {
} catch (error: Throwable) {
view.onError(error)
} finally {
view.hideProgress()
}
}
}

})
private var currentState: NetworkState by Delegates.observable(NetworkState.Init(),
{ _: KProperty<*>, _: NetworkState, newState: NetworkState ->
when (newState) {
is NetworkState.Init -> view.hideProgress()
is NetworkState.Loading -> view.showProgress()
is NetworkState.Success -> currentItem = newState.item
is NetworkState.Error -> view.onError(newState.throwable)
}
})
currentState = NetworkState.Loading()
currentState = try {
NetworkState.Success(dataStore.getItemInfo(itemType))
NetworkState.Error(error)
} finally {
currentState = NetworkState.Init()
}
}
}

sealed class NetworkState<out T> {
class Init : NetworkState<Nothing>()
class Loading : NetworkState<Nothing>()
class Success<out T>(val item: T) : NetworkState<T>()
class Error(val throwable: Throwable?) : NetworkState<Nothing>()
}

})
private var currentState: NetworkState by Delegates.observable(NetworkState.Init())
{ _: KProperty<*>, _: NetworkState, newState: NetworkState ->
when (newState) {
is NetworkState.Success -> currentItem = newState.item
}
}
} finally {
}
}
}

})
private var currentState: NetworkState<Item> by Delegates.observable(NetworkState.Init(),
{ _: KProperty<*>, _: NetworkState<Item>, newState: NetworkState<Item> ->
when (newState) {
is NetworkState.Success<Item> -> currentItem = newState.item
}
})
} finally {
}
}
}

조금 더 개선해보자.(Rx)

})
when (newState) {
}
})
} finally {
}
}
}

private val compositeDisposable: CompositeDisposable by lazy { CompositeDisposable() }
})
when (newState) {
}
})
dataStore.getItemInfo(itemType)
.observeOn(AndroidSchedulers.mainThread())
.doOnSubscribe { currentState = NetworkState.Loading() }
.doOnTerminate { currentState = NetworkState.Init() }
.subscribe({
currentState = NetworkState.Success(it)
}, {
currentState = NetworkState.Error(it)
})
.also {
compositeDisposable.add(it)
}
}
}

이렇게 하면 뭐가 좋나
요?

요?class MainViewModel(val view: MainView, val dataStore: DataStore) {
})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}

})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}
UI 관련 코드

})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}
상태가 한눈에 보인다.

})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}
상태가 한눈에 보인다.
상태값에 따른 UI가 명확해진다.

})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}
비즈니스 로직 코드

})
when (newState) {
}
})
.subscribe({
}, {
})
.also {
}
}
}
요?
비즈니스 로직 과 상태 관리만 집중

요?
implementation “org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version”

요?
… by Delegates.observable(…)

요?

요?
}

요?
}
class Success<out T>(val item: T) : NetworkState()
}

요?
}
}
Kotlin만 있으면 된다.

요?
}
}
간단하다.

요?
}
}
간단하다.(외부 프레임웍을 사용하는 것보다)

요?
}
}
상태에 SideEffect가 없다.

2개 이상의 중복상태는?

sealed class MultiNetworkState<out A, out B> {
class Init : MultiNetworkState<Nothing, Nothing>()
class Loading : MultiNetworkState<Nothing, Nothing>()
class Success<out A, out B>(val itemA: A, val itemB: B) : MultiNetworkState<A, B>()
class Error(val throwable: Throwable?) : MultiNetworkState<Nothing, Nothing>()
}

private var multiNetworkState: MultiNetworkState<Item, Item>by Delegates.observable(MultiNetworkState.Init())
{ _: KProperty<*>, _: MultiNetworkState<Item, Item>, newState: MultiNetworkState<Item, Item> ->
when (newState) {
is MultiNetworkState.Init -> view.hideProgress()
is MultiNetworkState.Loading -> view.showProgress()
is MultiNetworkState.Success<Item, Item> -> {
view.onUpdatedItem(newState.itemA, newState.itemB)
currentNetworkState = currentNetworkState.copy(NetworkState.Init(), NetworkState.Init())
}
is MultiNetworkState.Error -> {
compositeDisposable.clear()
view.onError(newState.throwable)
currentNetworkState = currentNetworkState.copy(NetworkState.Init(), NetworkState.Init())
}
}
}

data class NewNetworkState<out A, out B>(val state1: NetworkState<A>, val state2: NetworkState<B>) {
fun getMultiState(): MultiNetworkState<A, B> = when {
state1 is NetworkState.Error -> MultiNetworkState.Error(state1.throwable)
state2 is NetworkState.Error -> MultiNetworkState.Error(state2.throwable)
state1 is NetworkState.Loading || state2 is NetworkState.Loading -> MultiNetworkState.Loading()
state1 is NetworkState.Init && state2 is NetworkState.Success -> MultiNetworkState.Loading()
state1 is NetworkState.Success && state2 is NetworkState.Init -> MultiNetworkState.Loading()
state1 is NetworkState.Success && state2 is NetworkState.Success ->
MultiNetworkState.Success(state1.item, state2.item)
else -> MultiNetworkState.Init()
}
}

Init
I
I
Loading
I
L
Loading
I
S
Error
I
E
Loading
L
I
Loading
L
L
Loading
L
S
Error
L
E
Loading
S
I
Loading
S
L
Success
S
S
Error
S
E
Error
E
I
Error
E
L
Error
E
S
Error
E
E

class NetworkStateTest {
private val item = Item("kotlin", "#FFFFFF")
}

@Test
fun state1IsInitTest() {
assertEquals(MultiNetworkState.Init(),
NewNetworkState(NetworkState.Init(), NetworkState.Init()).getMultiState())
assertEquals(MultiNetworkState.Loading(),
NewNetworkState(NetworkState.Init(), NetworkState.Loading()).getMultiState())
NewNetworkState(NetworkState.Init(), NetworkState.Success(item)).getMultiState())
assertEquals(MultiNetworkState.Error(NullPointerException()),
NewNetworkState(NetworkState.Init(), NetworkState.Error(NullPointerException())).getMultiState())
}

@Test
fun state1IsLoadingTest() {
NewNetworkState(NetworkState.Loading(), NetworkState.Init()).getMultiState())
NewNetworkState(NetworkState.Loading(), NetworkState.Loading()).getMultiState())
NewNetworkState(NetworkState.Loading(), NetworkState.Success(item)).getMultiState())
NewNetworkState(NetworkState.Loading(), NetworkState.Error(NullPointerException())).getMultiState())
}

@Test
fun state1IsSuccessTest() {
NewNetworkState(NetworkState.Success(item), NetworkState.Init()).getMultiState())
NewNetworkState(NetworkState.Success(item), NetworkState.Loading()).getMultiState())
assertEquals(MultiNetworkState.Success(item, item),
NewNetworkState(NetworkState.Success(item), NetworkState.Success(item)).getMultiState())
NewNetworkState(NetworkState.Success(item), NetworkState.Error(NullPointerException())).getMultiState())
}

@Test
fun state1IsErrorTest() {
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Init()).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Loading()).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Success(item)).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()),
NetworkState.Error(NullPointerException())).getMultiState())
}

@Test
fun state1IsErrorTest() {
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Init()).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Loading()).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()), NetworkState.Success(item)).getMultiState())
NewNetworkState(NetworkState.Error(NullPointerException()),
NetworkState.Error(NullPointerException())).getMultiState())
}
Test가 용이하다.

private var currentNetworkState: NewNetworkState<Item, Item>
by Delegates.observable(NewNetworkState(NetworkState.Init(), NetworkState.Init()))
{ _: KProperty<*>, _: NewNetworkState<Item, Item>, newState: NewNetworkState<Item, Item> ->
multiNetworkState = newState.getMultiState()
}

private var state1: NetworkState<Item> by Delegates.observable(NetworkState.Init(),
currentNetworkState = currentNetworkState.copy(state1 = newState)
})
private var state2: NetworkState<Item>by Delegates.observable(NetworkState.Init(),
currentNetworkState = currentNetworkState.copy(state2 = newState)
})

정리
• observable 을 사용 했기 때문에 상태가 변경되면 자동으로 UI가 갱
신된다.
• observable 을 사용 했기 때문에 중복상태 처리가 없다.
• enum class, sealed class 생성 시점에 모든 상태를 사전에 알수 있
다.
• 런타임이 아닌 컴파일 시점에 상태값 처리 검증이 가능하다.
• 상태에 대한 SideEffect가 없다.
• 테스트코드 작성이 유리하다.
• 비즈니스 로직과 상태값 관리, 상태에따른 UI변화 2영역이 분리된
다.

QnA
https://github.com/myeonginwoo/DK_SAMPLE
om/myeonginwoo/droidknight-2018-umyeongin-selaed-classreul-sayongh
https://www.facebook.com/groups/1189616354467814/?ref=bookmarks
https://github.com/funfunStudy/study/wiki
myeonginwoo@gmail.com
https://medium.com/@lazysoul

Kotlin Sealed Class로 뷰상태 관리

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Kotlin Sealed Class로 뷰상태 관리

Semelhante a Kotlin Sealed Class로 뷰상태 관리 (20)

Mais de Myeongin Woo

Mais de Myeongin Woo (10)

Último

Último (20)

Kotlin Sealed Class로 뷰상태 관리