UI 레이어 코드 컨벤션 제안

[ki960213]

이번에 대규모 리팩터링을 하면서 아래와 같은 패턴을 지키려고 노력했습니다.

UI 컨트롤러(Activity나 Fragment)

특정 화면으로 이동하는 메서드 명

navigateToXxx()

특정 화면으로 이동하지 않고 화면을 덮는 UI를 보여주는 메서드 명

showXxx()

특정 UI의 로직을 초기화하는 메서드 명

setup[UI 이름]()

ViewModel의 프로퍼티 관찰하는 메서드 명

observe[프로퍼티 이름]()

데이터 바인딩 시 함수를 인자로 받는 매개변수 명

on[UI 이름][행위]
이유는 xml를 하나의 뷰로 생각하자는 의미.
뷰가 상호작용 시 실행될 함수를 입력받을 때를 생각해보면 위와 같은 네이밍이 어울린다고 생각합니다. 뷰 내부에서는 어떤 로직이 실행될 지 몰라도 된다고 생각합니다.

메서드 순서

setupDataBinding()
setupBackPressedDispatcher()
setupToolbar()
setupXxx()

observeXxx()
observeUiEvent()

만약 함수 분리가 필요하다면 최대한 사용되는 함수와 가까운 곳에 위치하도록 합니다.
예를 들어 setupDataBinding에 필요한 로직을 함수 분리했다면 setupDataBinding 바로 아래에 위치하도록 합니다.

ViewModel

UiEvent 네이밍

이벤트 네이밍은 한글로 읽을 때 순서로. (명사-동사-성공 여부)
예) 프로필 이미지 수정 실패 -> ProfileImageUpdateFail
성공일 땐 XxxComplete, 실패일 땐 XxxFail

멤버 변수 순서

UiEvent를 가장 아래로.

예시

class EventDetailViewModel(...) {
    val eventId: Long ...

    val _event: MutableLiveDate<Event> = ...
    val event: LiveDate<Event> = _event

    val _isScrapped: MutableLiveData<Boolean> = ...
    val isScrapped: LiveData<Event> = _isScrapped

    val _uiEvent: SingleLiveEvent<EventDetailUiEvent> = ...
    val uiEvent: LiveData<EventDetailUiEvent> = _uiEvent

---

더 나은 네이밍이 있거나 위의 컨벤션이 불필요하다고 생각되시면 주저없이 말해주셔도 괜찮습니다. 😄

[tmdgh1592]

특정 화면으로 이동하지 않고 화면을 덮는 UI를 보여주는 메서드 명
다이얼로그를 의미하는건가요?

[ki960213]

넵 다이얼로그나 toast, snackbar 등을 의미합니다!

[tmdgh1592]

메서드 순서
setup 이후에 observe 하자는 말씀이신거죠?

[ki960213]

넵

[tmdgh1592]

on[UI 이름][행위]

여기서 행위라는건 클릭, 터치 등을 의미하는건가요?
이미 정해져 있는 컨벤션이지 않나요??

[tmdgh1592]

[tmdgh1592]

위 코드는 제가 예전에 작성한 검색 화면 RecyclerView item의 xml입니다.
이런 코드를 말씀하신건가요?

[ki960213]

xml의 데이터 바인딩과 RecyclerView.Adapter, ViewHolder 등 뷰 관련 객체에게 넘겨주는 콜백 함수 네이밍에 대해 논의하고 싶습니다. 지난번에 코드 리뷰에서 한 번 논의했었지만 확실히 정하진 않아서요. 리팩터링할 때 보니까 xml의 데이터 바인딩 시 콜백 함수를 받는 매개변수 명을 어떤 코드에서는 콜백 함수가 실행하는 로직을 설명하는 이름으로 선언한 곳이 있었습니다.

[tmdgh1592]

예시가 없는 섹션은 예시를 추가해주시면 이해하기 편할 것 같습니다.

[ki960213]

넵 예시 추가했습니다 😊

[tmdgh1592]

UiEvent를 가장 아래로.
이건 어떠한 이유때문인가요?

[ki960213]

UiEvent는 ViewModel에서 사용하는 다른 멤버 변수와 약간 성격이 다르다고 생각했기 때문입니다. 뷰모델을 사용하는 화면에서 처리되어야 할 Ui 이벤트를 모두 넣는 것이니까요. 반면 멤버 변수는 Ui 마다 분리될 수 있고, 다른 멤버 변수에 의해 유도될 수 있기 때문에 멤버 변수 간에 관계가 있을 수 있지만요. 가장 아래가 아니라 가장 위도 괜찮다고 생각합니다.