레이블이 구조인 게시물을 표시합니다. 모든 게시물 표시
레이블이 구조인 게시물을 표시합니다. 모든 게시물 표시

2019년 1월 18일 금요일

[안드로이드] 어떻게하면 안드로이드 UI의 재사용성을 극대화할 수 있는가? - 5가지 흔한 실수들(번역)

원문

어떻게하면 안드로이드 UI의 재사용성을 극대화할 수 있는가? - 5가지 흔한 실수들

지난 몇 달 동안, 저는 그루폰에서 사용했던 UI 중에 몇가지를 다시 재사용해야할 상황들이 있었습니다. 이 과정에서, 우리가 만든 UI의 장점이 뭔지, 가장 흔하게 했던 실수가 무엇인지 생각해보게 되었습니다.
UI를 좋게 만든다는 건 뭘까요? "좋다"는 것은 상대적이겠지만, 어느 소프트웨어에서나 적용될 수 있는 다음의 3가지 원칙들에 대해서는 대부분 동의할 것입니다.
  • 가독성(Redablitiy) : 좋은 UI 컴포넌트는 읽기 쉬워야합니다. 안드로이드 스튜디오의 디자인탭을 열지 않아도, xml 파일만 보고도 명확하게 알 수 있어야 합니다.
  • 테스트 가능(Testable) : 모든 UI 컴포넌트는 외부모듈에 의존 없이 쉽게 테스트할 수 있어야합니다.
  • 재사용 가능(Reusable) : UI 컴포넌트는 기본 동작의 변화 없이도 확장되거나 재사용될 수 있어야합니다.
이 글에서, UI의 재사용성에 영향을 끼치는 5가지의 흔한 실수들을 살펴볼 것입니다. 그리고 재사용 가능한 UI가 코드를 어떻게 더 읽기 쉽고 테스트하기 쉽도록 만들어 주는지도 살펴보겠습니다.

1. 커스텀 뷰에서 비즈니스 모델을 바로 사용하는 사례

때때로, 시간을 절약하고 중복된 코드를 피하기 위해서 네트워크 / DB에서 사용했던 모델을 뷰에서도 재사용하곤 합니다. 다음의 예제를 보겟습니다.
// Network 모델
data class UserModel(
  val id: Int, 
  val name: String, 
  val age: Int, 
  val address: String, 
  val createdAt: Date, 
  val updatedAt: Date)

// Network 모델을 바로 View에 전달
userApiClient.getUser(userId)
          .subscribe(
  { userModel -> userView.render(userModel) },
  { error -> Log.e("TAG", "Failed to find user", error) }
          )
이 예제에서, useApiClient 메서드를 이용해 백엔드로부터 사용자의 정보를 가져와서 UserModel 이라는 모델객체에 데이터를 저장합니다. 그러고는 이 모델을 바로 UserView에 전달하고 있습니다. (이 뷰에서는 유저의 name과 address만 필요로 합니다.) 얼핏 보기에, 이는 매우 쉽게 원하는 바를 달성한 것 같지만, 재사용성을 떨어뜨리며 장기적으로 봤을 때 심각한 문제를 야기할 수도 있습니다.

왜 이것이 나쁜가?

  • 백엔드용 모델을 뷰에 그대로 사용하면 안되는 가장 큰 이유는, 이 뷰를 앱의 다른 부분에서 재사용할 수 없기 때문입니다. 즉, UI를 렌더링하려면 해당 백엔드의 결과가 필요하다는 의미가 됩니다.
  • 백엔드용 모델은 일반적으로 UI에서 필요한 내용보다 더 많은 데이터를 가지고 있습니다. 추가적인 정보는 추가적인 복잡도를 의미합니다. 모델에 의도하지 않게 많은 정보가 포함되어 있기 때문에, UI에서도 부적절한 정보를 사용할 수도 있습니다. 그렇기에, 이 예제에서는 다음과 같이 UI용 모델을 간소화할 수 있습니다.
    data class UserUiModel(val name: String, val address: String))
  • 백엔드에서 변경이 일어난다면 어떻게될지 장담할 수 없습니다. 앱개발자들은 종종 앱을 지원하는 백엔드는 절대 변경되지 않을 것이라고 가정하지만, 이는 매우 잘못된 생각입니다. 백엔드는 언제든 변경될 것이고, 앱에서는 그에 대한 대비가 되어 있어야 합니다. 백엔드에서 무언가가 변경되었기 때문에, UI가 변경되어서는 안됩니다.

이걸 어떻게 고칠까?

이 문제를 고치는건 쉽지만, 추가적인 코드를 필요로 합니다. UI용 모델과 백엔드용 모델 -> UI용 모델 변환 메서드를 추가적으로 구현해주어야 합니다. 위의 예제에서는 UserModel을 UserUiModel로 변경하기 위한 변환 메서드를 다음과 같이 적용해 주어야 합니다.
userApiClient.getUser(userId)
          .map{ userModel -> convertToUiModel(userModel) }
          .subscribe(
  { userUiModel -> userView.render(userUiModel) },
  { error -> Log.e("TAG", "Failed to find user", error) }
          )
          
// 백엔드모델 -> UI모델 변환 메서드
fun convertToUiModel(userModel : UserModel) : UserUiModel {
    // Some Code
    return userUiModel
}
새 구현코드로 인해 모델 변환로직에 대한 추가적인 복잡도가 생기기는 했지만, 이 조금의 복잡도 덕분에 백엔드와 UI의 의존관계를 끊어버릴 수 있습니다. 새로운 구현패턴 덕분에, 백엔드에서 불필요한 데이터를 UI로 전달하지 않으며, 자유롭게 뷰를 재사용할 수 있게 되었습니다.

2.레이아웃 하나에 너무 몰려있는 사례(Monolithic View)

모든 엑티비티 UI가 하나의 문서에 포함된 레이아웃 xml파일을 본 적 있습니까? 불행하게도... 이는 안드로이드에서 매우 흔한 패턴이며, 많은 문제들을 야기합니다.

왜 이것이 나쁜가?

다음과 같은 이유로 위의 3가지 원칙에 위배됩니다.
  • 너무 많은 정보와 많은 레이어가 존재하기 때문에, 이러한 파일은 가독성이 떨어집니다.
  • xml의 부분들을 독립적으로 테스트할 수 없습니다. 우리는 에스프레소에서 실행되는 통합테스트의 부분으로 UI를 테스트하려는 경향이 있습니다. 통합테스트를 하는건 좋지만, UI와 비즈니스 로직이 함꼐 테스트되기 때문에 문제가 발생했을 때, 발견하기가 더 어려워집니다. 하나의 큰 레이아웃 xml파일을 여러개의 작은 조각으로 나누고, UI에서 비즈니스 로직을 제거한다면 UI만 테스트를 수행할 수 있습니다. 이러한 테스트는 통합테스트보다 더 세밀한 수준에서 UI의 문제들을 찾아낼 수 있습니다.
  • xml 부분들을 독립적으로 재사용할 수 없습니다. 그렇기때문에 재사용을 하려면 copy & paste를 할 수밖에 없습니다. 시간이 지날수록 중복된 컴포넌트들이 생겨서 앱의 일관성이 떨어지는 결과를 가져옵니다.

이걸 어떻게 고칠까?

모든 UI로직을 하나의 xml에 넣는 것은 마치 하나의 엑티비티에 모든 비즈니스 로직이 들어가있는 것과 같습니다. 비즈니스로직을 구성할 때 DAO, 모델, 백엔드 클라이언트를 구성하는 것과 동일한 방법으로 UI를 더 작게 쪼개야 합니다. 커스텀 뷰, <include>, <merge>를 잘 활용하여 UI를 쪼개야 합니다. 하나에 몰려있는 xml 파일을 UI 컴포넌트가 재사용될때까지 쪼개지않고 기다린다면 심각한 이슈에 봉착할 수 있습니다. 정작 고쳐야할 때가 되었을 때, UI가 엑티비티 / 프레그먼트와 너무 강하게 결합되어 있어서 리팩토링하기 더 어려워지고 앱의 기능에까지 영향을 끼칠 것입니다.
다음은 실제 오픈소스 프로젝트에서 사용되는 레이아웃을 가져온 것입니다. 제가 프로퍼티들을 좀 지우고, 주석을 추가하여 레이아웃을 좀 더 읽기 쉽도록 수정했습니다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout ... >
  <android.support.design.widget.AppBarLayout ... >

    <!-- ToolBar -->
    <android.support.v7.widget.Toolbar ... >
      <RelativeLayout ...
        <TextView/>
        <TextView/>
      </RelativeLayout>
    </android.support.v7.widget.Toolbar>
  </android.support.design.widget.AppBarLayout>

  <ScrollView ... >
    <FrameLayout ... >
      <LinearLayout ... >

        <!-- Header -->
        <LinearLayout ... >
          <TextView ... />
          <TextView ... />
        </LinearLayout>

        <!-- User Message -->
        <LinearLayout ... >
          <TextView ... />
        </LinearLayout>

        <!-- User Information -->
        <LinearLayout ... >
          <TextView ... />
        </LinearLayout>

        <!-- Option selector -->
        <LinearLayout ... >
          <TextView ... />
          <Spinner ... />
        </LinearLayout>
      </LinearLayout>

      <!-- progress overlay -->
      <FrameLayout ... >
        <ProgressBar ... />
      </FrameLayout>
    </FrameLayout>
  </ScrollView>
</android.support.design.widget.CoordinatorLayout>
프로퍼티들을 지우고 주석을 추가했는데도, xml 파일을 읽기가 쉽지는 않습니다. 각 컴포넌트들이 어디에 위치되어 있는지 이해하기 어렵도록 하는 중첩 레이아웃들이 여러개 있습니다. 주석 없이는 각 태그들이 어떻게 관계되어 있고, 무엇을 의미하는지 파악하기가 어렵습니다.
다음 예제는 위의 레이아웃을 커스텀 뷰를 사용하여 재구성한 것입니다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout ... >
  <android.support.design.widget.AppBarLayout ... >
    <CompanyToolbar ... />
  </android.support.design.widget.AppBarLayout>

  <ScrollView ... >
    <FrameLayout ... >
      <LinearLayout ... >
        
        <InformationHeader ... />

        <UserMessageView ... />

        <UserInformationView ... />
        
        <MultipleChoiceView ... />
      </LinearLayout>

      <ProgressOverlay ... >
    </FrameLayout>
  </ScrollView>
</android.support.design.widget.CoordinatorLayout>
각 기능별로 커스텀 뷰를 생성하여, 재사용할 수 있고 추후에 리팩토링할 때 사이드이펙드의 염려도 거의 없도록 변경했습니다. 클래스 명이 직관적이기 때문에 주석은 더이상 필요하지 않습니다. 만약 모든 엑티비티들에서 ProgressOverlay 컴포넌트를 사용하여 새로운 프로그레스 애니메이션을 구현해야 한다면 얼마나 쉬워질 지 상상해보세요.
그루폰에서 지향하는 작은 UI 컴포넌트 단위의 접근은 Atomic Design (저자 Brad Frost)로부터 영향을 받았습니다. 만약 당신이 UI에 특히 관심이 많다면, 이 책을 꼭 읽어보기를 추천합니다.

3.커스텀 뷰에 비즈니스 로직이 있는 사례

이전 사례에서, 우리는 커스텀 뷰를 구현했을 때 얻을 수 있는 장점에 대하여 이야기 했었습니다. 하지만, 커스텀 뷰를 주의하여 사용하지 않는다면 양날의 검과 같습니다. 로그를 추가하고, 의사결정 로직을 넣는 등.. 자칫 커스텀 뷰에 비즈니스 로직을 결합하여 사용하기가 쉽습니다. 이는 얼핏 보기에 코드를 잘 분류한 것 같지만, 사실은 그렇지 않습니다..

왜 이것이 나쁜가?

  • 뷰에 로직이 결합되어 있으면, 특정 사용사례를 벗어났을 경우, 재사용하기 어렵습니다. 뷰를 완전하게 재사용하려면, 뷰 자체는 단순하며, 비즈니스로직에 무관한 채로 남아있어야 합니다.정말 잘 구현된 뷰는 어떠한 의사결정 없이 상태값만을 전달받고, 그에 따라 렌더링 되어야 합니다.
  • 비즈니스 로직이 추가되면, 뷰를 테스트하기가 어려워집니다. 잘 구현된 뷰는 더 작은 UI 컴포넌트여야 합니다. 각 뷰들을 따로 분리하여 자동화된 테스트를 쉽게 수행할 수 있어야 합니다.

이걸 어떻게 고칠까?

뷰와 비즈니스 로직을 분리하는 데에는 많은 방법들이 존재합니다. 이 중 하나는, 주로 선호되는 아키텍쳐를 적용하는 것입니다. MVP를 이용한다면 Presenter에 비즈니스 로직을 모을 수도 있고, MVVM을 이용한다면 ViewModel에 비즈니스 로직을 모을 수도 있습니다.
그루폰에서는 이 문제를 해결하기 위해, 한 방향으로의 데이터 흐름만 존재하는 MVI패턴을 적용했습니다. MVI에서 비즈니스 로직은 Intent의 일부가 될 것이고, 이는 불변의 상태객체를 생산할 것이며, 이 상태를 이용해 뷰를 렌더링 할 것입니다.
만약 한 방향으로의 데이터 흐름에 관심이 있고, 재사용 가능한 UI 컴포넌트를 구현하고 싶다면, Pratyush Kshirsagar / Yichen WU 분이 쓴 Cross view communication using Grox 포스트를 꼭 읽어보기를 권합니다. 이 블로그에서 어떻게 한 방향의 데이터 흐름이 UI 구성에 도움이 될지 잘 설명해주고 있습니다.

4.과도한 최적화 사례

저는 아직까지 성능에 대해 언급하지 않았습니다. 어쩌면, 좋은 UI를 만드는 원칙에 왜 성능이라는 요소가 포함되지 않았을 지 의문인 분들도 있을 것입니다. 성능이 중요하다고 대체적으로 생각하겠지만, 가독성, 재사용성, 테스트 가능성이 복잡한 최적화코드보다도 훨씬 중요합니다. 우리가 성능이 훨씬 뛰어난 어셈블러 코드를 직접 쓰지 않고, 프로그래밍 언어를 사용하는 이유와 비슷합니다.
안드로이드에서는, Nested Layout / Double Taxation 이 UI 퍼포먼스에 영향을 끼치는 두가지 주요 원인으로 꼽고 있습니다. 이러한 이유 때문에, 중첩 레이아웃을 피하고 ConstraintLayout을 쓰도록 당부하는 포스트나 팟캐스트들이 끊임없이 쏟아져 나왔습니다. 물론 ConstraintLayout은 RelativeLayout보다도 강력하고, 내부적으로 Double Taxation 이슈도 발생하지 않는 멋진 도구이지만, 보통 성능 이슈들은 대부분 극단적인 상황일 때 주로 발생합니다.
ConstraintLayout에 대한 포스트나 팟캐스트들을 보면, UI를 구성할 때 대부분 하나의 ConstraintLayout만을 사용하여 구현하라고 제시하고 있습니다.

왜 이것이 나쁜가?

  • 하나의 ConstraintLayout만 사용하여 UI를 구성한다면, 이는 위에서 언급했던 하나의 레이아웃에 너무 몰려있는 사례가 될 것입니다. 이미 언급했다시피, 이는 가독성도 떨어지고, 재사용할 수 없으며, 테스트하기도 어려운 상황이 됩니다.
  • UI를 가장 중요한 것으로 다루지는 않고 있습니다. 우리는 모든 비즈니스 로직을 엑티비티나 프레그먼트 내부에 구현하도록 하지 않을 것입니다. 이는 UI를 하나의 xml 파일에 두지 않는 것과 같은 이유입니다.

이걸 어떻게 고칠까?

성능을 희생하는 코드는 항상 차선책이 되어야 합니다. 과도한 최적화를 방지하기 위해, 개발 프로세스의 일부로 성능 테스트를 추가할 필요가 있습니다. 이 테스트를 통해 성능상의 이슈가 있다는 것을 바로바로 확인하며, 문제를 해결할 방법이 없을 때만 Monolithic 뷰 구조를 도입해야 합니다. 로직과 너무 많이 바인딩되거나, 혹은 UI를 필요 이상으로 다시 그려서 UI의 성능 문제를 일으키는지의 빈도를 테스트 결과로 확인한다면 아마 깜짝 놀랄 것입니다.

5.코드리뷰에서 UI를 소홀히하는 사례

코드리뷰 하는건 매우 어렵고, 시간을 많이 소모합니다. 특히 xml 파일들은 이해하기에 쉽지는 않습니다. 이러한 이유들 떄문에, 코드리뷰시에 UI를 소홀히하고는 합니다.

왜 이것이 나쁜가?

  • UI는 유저에게 첫인상입니다. 일관되고 깔끔하고 잘 구조화된 UI는 유저들이 앱에 더 머무르게 합니다.
  • UI를 가장 중요한 것으로 다루지는 않고 있습니다. UI는 앱의 절반을 차지하고 있습니다. 비즈니스 로직이 중요하여 리뷰하는 만큼, xml과 뷰들도 리뷰하는데 시간을 투자해야 합니다.

이걸 어떻게 고칠까?

리뷰 프로세스를 개선하기 위한 몇가지 방법이 있습니다.
리뷰어로써
  • xml을 이해할 수 없다는 것을 인지해도 매우 괜찮습니다. 상황적인 이해가 충분하지 않거나, UI가 매우 복잡할 수 있습니다. 작성자에게 도움을 요청하세요.
  • 작성자에게 xml을 잘게 쪼개도록 요청하는걸 나쁘게 여기지 마세요. 분명 덩치가 큰 클래스나 메서드에도 똑같은 요청을 했을 것입니다.
  • UI에 대하여 코드리뷰를 시작하세요.
  • 머티리얼 디자인의 가이드라인과 친숙해지세요. 저는 항상 이런 확인을 합니다. "프레스 상태일 떄 리플효과가 필요한가요?", "우리 버튼에 그림자가 필요한가요?"
코드 작성자로써
  • 풀리퀘스트에 스크린샷을 추가하세요. 동료 리뷰어가 UI 코드를 파악하는데 더 수월해집니다.
  • 디자이너에게 현재 구현결과에 대해 리뷰를 요청하세요. 디자이너는 UI를 리뷰할 수 있는 가장 좋은 리뷰어 입니다. 가능하다면 개발주기의 일찍 리뷰를 요청하세요.
  • 하나의 xml 파일에 몰빵하지 마세요. 위에서도 수없이 언급했듯이 매우 좋지 않습니다. 작은 UI 컴포넌트가 리뷰하기에 더 쉽고 더 낫습니다.
  • UI 전용 풀리퀘스트를 생성하세요. UI 전용 풀리퀘스트에 UI 관련된 내용만 올려서 리뷰어가 온전히 UI 리뷰에만 집중할 수 있게 됩니다.

결론

재사용 가능한 UI 컴포넌트를 만드는건 어려운 일이 아니지만 원칙을 필요로 합니다. 이 원칙은 우리가 화면 관점에서의 생각을 버리고, 컴포넌트 자체와 컴포넌트간의 관계의 관점에서 생각하도록 요구합니다. UI를 재사용하면 새로운 기능들을 보다 빠르게 개발할 수 있습니다. 또한, 재사용되는 컴포넌트들은 대체적으로 버그를 수정했으며, 최초 개발할때 생각하지 못하는 여러 상황들에 대해 고려가 되어 있을 것입니다.
위에서 논의했던 팁들을 요약하자면 다음과 같습니다.
  • 비즈니스모델을 뷰에서 사용하는건 매우 좋지 않습니다. 항상 백엔드와 비즈니스로직으로부터 뷰를 분리하세요.
  • 하나의 xml에 모든 레이아웃을 몰아넣지 마세요. 이는 코드의 가독성을 떨어뜨리고, 테스트하기 어렵게 만들며, 앱의 일관성을 깨뜨리는 원인이 되기도 합니다.
  • 비즈니스 로직을 UI에 포함하지 마세요. 로깅, 의사결정 로직 등을 뷰에 포함하지 마세요. 뷰는 오로지 불변 상태값을 전달받고 그에 따라 렌더링 하는 역할만을 수행해야 합니다.
  • 코드품질을 희생하여 얻은 최적화는 항상 차선책이어야 합니다. 중첩 레이아웃을 피하기 위한 Monolithic 뷰(ex ConstraintLayout)구성은 대안이 없을 때에만 사용하는 것이 좋습니다.
  • UI 코드를 항상 최우선으로 대우하세요. 어느 기능이든지 UI개발을 가장 먼저 시작하고, 디자이너와 팀 동료들에게 가능한 빨리 독립적으로 UI 리뷰를 받을 것을 권장합니다.
작성자: 시간: 댓글 없음:
라벨: , , , , , , , , , , , , , ,

2018년 4월 17일 화요일

[안드로이드] Architecture Component 3 - Paging Library 공식문서 번역

Paging Library

페이징 라이브러리는 앱이 데이터 소스로부터 필요한 정보를 점진적으로 읽어오는 작업을 쉽게 만들어주는 라이브러리로, 디바이스에 과부하가 걸리거나, 큰 데이터베이스로부터의 쿼리를 기다리지 않도록 만들어준다.

개요

대부분의 앱들은 많은 양의 데이터를 이용하여 동작하지만, 사실은 화면에 보여야 할 필요가 있는 일부분의 데이터만 불러와서 보여지면 된다. 예를들어, 어떤 앱에서 잠재적으로 보여줄 수 있는 데이터를 몇천개 가지고 있더라도, 한번에 몇십개씩만 엑세스하면 된다. 이부분을 앱이 신경쓰고 있지 않다면, 앱에서 불필요한 데이터까지 모두 요청하게 되고, 이는 불필요한 네트워크 트래픽의 발생과, 디바이스의 성능저하를 초래한다. 데이터가 원격저장소에 저장되거나 동기화되면, 이 또한 앱이 느려지는 원인이 되고, 사용자의 데이터요금을 낭비하게 된다.
기존의 Android API는 콘텐츠의 페이징을 허용했지만 중요한 제약 조건과 단점이 있었다.
  • CursorAdapter는 데이터베이스의 쿼리결과를 ListView의 항목들에 쉽게 매핑시켜주었지만, 데이터베이스 쿼리를 UI 스레드에서 하는것과 Cursor를 이용하기 때문에 데이터의 페이징을 비효율적으로 하는 단점이었다. 더 많은 정보를 확인하려면 Large Database Queries on Android 블로그 글을 확인한다.
  • AsyncListUtil은 RecyclerView에서 포지션 기반의 페이징을 허용하지만, 포지션 기반이 아닌 페이징은 허용하지 않는다. 또한, 셀수 있는 데이터셋에서 null을 플레이스 홀더로 강제로 사용한다.
새로운 페이징 라이브러리는 이러한 문제들을 해결한다. 이 라이브러리는 필요한 데이터를 요청하는 프로세스를 간소화하는 몇몇 클래스들을 포함한다. 이 클래스들은 Room과 같은 기존의 아키텍쳐 컴포넌트 라이브러리들과도 원활하게 잘 동작하도록 구성되어 있다.

기능

페이징 라이브러리의 클래스들을 사용하면, 이 섹션에서 소개되는 작업들을 수행하도록 도와준다.

데이터를 어떻게 가져오는지 정의하기

DataSource클래스를 이용하여 페이징된 데이터를 얻어올 데이터 소스를 정의한다. 데이터 접근 방법에 따라, 이 클래스를 상속받아 서브클래스로 구성할 수도 있다.
  • 로드할 데이터가 다음 / 이전 키를 포함하고 있다면, PageKeyedDataSource 클래스를 사용한다. 예를들어, 네트워크로부터 소셜미디어의 게시물을 가져올 경우, 연속적인 다음페이지를 로드하기 위해서, 다음페이지의 토큰을 전달해야 할 수도 있다.
  • 항목 N의 데이터를 이용해 N+1의 데이터를 가져와야 한다면, ItemKeyedDataSource클래스를 사용한다. 예를들어, 스레드된 코멘트들을 가져와야 한다면, 다음 코멘트를 가져오기 위해, 하나의 코멘트의 아이디를 전달해야 할 수도 있다.
  • 데이터 저장소에서 선택한 위치로부터 데이터의 페이지를 가져와야한다면, PositionalDataSource클래스를 사용한다. 이 클래스는 "1200번 위치로부터 20개의 데이터 반환"과 같이, 선택된 위치로부터 시작하는 데이터의 집합을 요청할 수 있다.
만약 Room 라이브러리를 사용하여 데이터를 관리하고 있다면, 이 Room 라이브러리는 자동적으로 PositionalDataSource인스턴스를 생성하기 위해 DataSource.Factory를 발생시킬 수 있다.
@Query("select * from users WHERE age > :age order by name DESC, id ASC")
DataSource.Factory<Integer, User> usersOlderThan(int age);

메모리로부터 데이터 로드

PagedList클래스는 DataSource로부터 데이터를 불러옵니다. 개발자는 데이터가 한번에 얼마나 로드가 되어야 하고, 미리 패치되어야 하는지 설정하여, 사용자가 데이터로드가 완료될 때까지 기다려야 하는 시간을 최소화할 수 있다. 이 클래스는 RecyclerView.Adapter와 같은 다른 클래스에게 업데이트 신호를 제공하여, 페이지가 로드되었을 때 RecyclerView의 컨텐츠를 업데이트하도록 도와준다.
앱의 구조에 따라, PagedList 클래스 사용을 위한 몇몇 옵션들이 있다. 더 많은 내용을 보려면, 다음의 데이터 로딩 구조를 참고한다.

UI에 데이터 나타내기

PagedListAdapter 클래스는 PagedList로부터 데이터를 UI에 나타내기 위한 RecyclerView.Adapter의 구현체이다. 예를들어, 새로운 페이지가 로드되었을 때, PagedListAdapter는 데이터가 갱신되었음을 RecyclerView에게 알려준다. 이는 RecyclerView가 실제 항목으로 플레이스홀더를 대체하도록 하여 적절한 애니메이션을 수행할 수 있다.
또한 PagedListAdapter는 백그라운드 스레드를 사용하여 한 PagedList에서 다른 PagedList 로의 변경 사항을 계산하고 (예 : 데이터베이스 변경이 업데이트 된 데이터로 새 PagedList를 생성하는 경우) 필요에 따라 목록 내용을 업데이트하기 위해 notifyItem ... () 메소드를 호출한다. 그리고나서 RecyclerView는 필요한 변화를 수행한다. 예를들어, PagedList 버전사이에 항목들의 위치가 변경되면, RecyclerView는 해당 항목을 새로운 위치로 애니메이션으로 움직인다.

데이터 갱신 관찰하기

페이징 라이브러리는 실시간 업데이트가 가능한 PagedList 컨테이너를 생성하기 위한 클래스들을 제공하고 있다.
  • LivePageListBuilder : 이 클래스는 개발자가 제공한 DataSource.Factory를 통해 LiveData<PagedList>를 생성한다. 다음의 샘플코드에서 보는것처럼, 만약 데이터베이스를 관리하기 위해 Room 라이브러리를 사용한다면, DAO는 PositionalDataSource를 사용하여 DataSource.Factory를 생성할 수 있다.
LiveData<PagedList<Item>> pagedItems =
        LivePagedListBuilder(myDataSource, /* page size */ 50)
                .setFetchExecutor(myNetworkExecutor)
                .build();
  • RxpagedListBuilder : 이 클래스는 LivepagedListBuilder와 유사하게, RxJava2 기반의 기능을 제공한다. 이 클래스는 아키텍쳐 라이브러리의 RxJava2(android.arch.paging:rxjava2:1.0.0-alpha1)기반으로 제공된다. 다음의 코드에서 볼 수 있듯이, 이 클래스를 사용하여, PagedList를 구현할 때 Flowable과 Observable을 생성할 수 있다.
Flowable<PagedList<Item>> pagedItems =
        RxPagedListBuilder(myDataSource, /* page size */ 50)
                .setFetchScheduler(myNetworkScheduler)
                .buildFlowable(BackpressureStrategy.LATEST);

데이터 흐름 생성하기

페이징 라이브러리의 컴포넌트는 백그라운드 스레드의 생산자로부터 UI스레드의 화면 출력까지의 데이터 흐름을 구성한다. 예를들어, 새로운 항목이 데이터베이스에 추가되면, DataSource는 갱신될 것이고, LiveData<PagedList> / Flowable<PagedList> 는 백그라운드 스레드에서 새로운 PagedList를 생산한다.
paging-threading.gif
Figure1 : 페이징 라이브러 컴포넌트들은 대부분의 작업을 백그라운드 스레드에서 수행한다. 그래서 UI스레드에 큰 부담이 되지 않는다.
새로 생성된 PagedList는 UI스레드에서 PagedListAdapter로 보내진다. PagedListAdapter는 백그라운드 스레드에서 DiffUtil을 이용하여, 기존의 리스트와 새로운 리스트 사이의 차이를 계산한다. 비교가 끝났으면, PagedListAdapter는 리스트의 차이점을 이용하여 RecyclerView.Adapter.notifyItemInserted() 를 호출하여 UI에 항목들을 삽입한다.
UI스레드의 RecyclerView는 삽입된 아이템을 확인하여 적절하게 애니메이셔닝 한다.

데이터베이스 예제

다음의 코드조각들은 모든 라이브러리들이 함께 동작하도록 하는 몇몇 방법을 보여준다.

LiveData를 이용하여 페이징된 데이터 관찰하기

다음의 코드는 모든 컴포넌트들이 함께 동작하는 것을 보여준다. 사용자가 데이터베이스에 추가, 삭제, 변경할 때, RecyclerView의 내용은 자동적으로, 효율적으로 갱신된다.
@Dao
interface UserDao {
    // The Integer type parameter tells Room to use a PositionalDataSource
    // object, with position-based loading under the hood.
    @Query("SELECT * FROM user ORDER BY lastName ASC")
    public abstract DataSource.Factory<Integer, User> usersByLastName();
}

class MyViewModel extends ViewModel {
    public final LiveData<PagedList<User>> usersList;
    public MyViewModel(UserDao userDao) {
        usersList = new LivePagedListBuilder<>(
                userDao.usersByLastName(), /* page size */ 20).build();
    }
}

class MyActivity extends AppCompatActivity {
    private UserAdapter<User> mAdapter;

    @Override
    public void onCreate(Bundle savedState) {
        super.onCreate(savedState);
        MyViewModel viewModel = ViewModelProviders.of(this).get(MyViewModel.class);
        RecyclerView recyclerView = findViewById(R.id.user_list);
        mAdapter = new UserAdapter();
        viewModel.usersList.observe(this, pagedList ->
                mAdapter.submitList(pagedList));
        recyclerView.setAdapter(mAdapter);
    }
}

class UserAdapter extends PagedListAdapter<User, UserViewHolder> {
    public UserAdapter() {
        super(DIFF_CALLBACK);
    }
    @Override
    public void onBindViewHolder(UserViewHolder holder, int position) {
        User user = getItem(position);
        if (user != null) {
            holder.bindTo(user);
        } else {
            // Null defines a placeholder item - PagedListAdapter will automatically invalidate
            // this row when the actual object is loaded from the database
            holder.clear();
        }
    }
    public static final DiffUtil.ItemCallback<User> DIFF_CALLBACK =
            new DiffUtil.ItemCallback<User>() {
        @Override
        public boolean areItemsTheSame(@NonNull User oldUser, @NonNull User newUser) {
            // User properties may have changed if reloaded from the DB, but ID is fixed
            return oldUser.getId() == newUser.getId();
        }
        @Override
        public boolean areContentsTheSame(@NonNull User oldUser, @NonNull User newUser) {
            // NOTE: if you use equals, your object must properly override Object#equals()
            // Incorrectly returning false here will result in too many animations.
            return oldUser.equals(newUser);
        }
    }
}

RxJava2를 이용하여 페이징된 데이터 관찰하기

LiveData대신 RxJava2를 사용하려고 한다면, Observable이나 Flowable 객체를 생성한다.
class MyViewModel extends ViewModel {

    public final Flowable<PagedList<User>> usersList;

    public MyViewModel(UserDao userDao) {
        usersList = new RxPagedListBuilder<>(userDao.usersByLastName(),
                /* page size */ 50).buildFlowable(BackpressureStrategy.LATEST);
    }
}
그리고, 다음의 코드와 같이 해당 데이터의 관찰을 시작 / 중지할 수 있다.
class MyActivity extends AppCompatActivity {
    private UserAdapter<User> mAdapter;
    private final CompositeDisposable mDisposable = new CompositeDisposable();

    @Override
    public void onCreate(Bundle savedState) {
        super.onCreate(savedState);
        MyViewModel viewModel = ViewModelProviders.of(this).get(MyViewModel.class);
        RecyclerView recyclerView = findViewById(R.id.user_list);
        mAdapter = new UserAdapter();
        recyclerView.setAdapter(mAdapter);
    }

    @Override
    protected void onStart() {
        super.onStart();
        myDisposable.add(mViewModel.usersList.subscribe(flowableList ->
                mAdapter.submitList(flowableList)));
    }

    @Override
    protected void onStop() {
        super.onStop();
        mDisposable.clear();
    }
}
UserDao, UserAdapter 클래스의 코드는 LiveData의 예제와 같으므로 생략한다.

데이터 로딩 구조 선택하기

페이징 라이브러리를 이용해 데이터를 페이징하는 두가지의 기본적인 방법이 있다.

네트워크 or 데이터베이스

첫번째로, 하나의 소스(로컬저장소이든 네트워크이든)로부터 페이징을 할 수 있다. 이 경우 다음 샘플과 같이 LiveData를 이용하여 로드된 데이터를 UI에 전달한다.
데이터의 소스를 지정하려면 LivePagedListBuilder에 DataSource.Factory를 전달한다.
paging-network-or-database.png
Figure2 : 하나의 데이터소스는 DataSource.Factory를 제공하여 컨텐츠를 로드한다.
데이터베이스를 관찰할 때, 컨텐츠의 변화가 발생하면, 데이터베이스는 새로운 PagedList에 푸쉬한다. 네트워크 페이징인 경우에(백엔드가 업데이트를 보내지 않을 때), 스와이프 리프레시 같은 시그널은 현재 데이터소스를 무효화함으로써 새로운 PagedList를 받아올 수 있다. 이는 모든 데이터를 비동기적으로 새로고침한다.
PagingWithNetworkSample의 메모리 + 네트워크 저장소 구현은 스와이프 리프레시, 네트워크 에러, 재시도를 처리하는 동안, Retrofit을 이용하여 어떻게 네트워크 DataSource.Factory를 구현했는지를 보여준다.

네트워크 and 데이터베이스

두번째로, 로컬저장소로부터 데이터를 페이지할 수 있고, 로컬저장소는 네트워크로부터 추가 데이터를 페이징한다. 이는 종종 네트워크 연결을 최소화하고, 백엔드의 캐시로 데이터베이스를 사용하여 더 나은 연결지양 경험을 제공한다.
이 경우, LiveData를 이용하여 데이터베이스로부터 컨텐츠를 페이징하고, 최신 데이터의 시그널을 관찰하기 위해, LivePagedListBuilder에 BoundaryCallback을 전달한다.
paging-network-plus-database.png
Figure3 : 데이터베이스는 네트워크 데이터의 캐시로 이용된다. UI는 데이터베이스로부터 데이터를 로드하고, 데이터가 없을 때, 네트워크로 신호를 보내서 네트워크로부터 데이터베이스로 데이터를 로드한다.
이후, 이 콜백을 네트워크 요청에 연결하면 데이터가 데이터베이스에 바로 저장된다. UI는 데이터베이스의 갱신을 구독하고 있으므로, 새로운 데이터의 변경은 자동적으로 UI로 전달된다.
PagingWithNetworkSample의 데이터베이스 + 네트워크 저장소 구현은 스와이프 리프레시, 네트워크 에러, 재시도를 처리하는 동안, Retrofit을 이용하여 어떻게 네트워크의 BoundaryCallback을 구현하는지 보여준다.

원문 : https://developer.android.com/topic/libraries/architecture/paging.html


작성자: 시간: 댓글 없음:
라벨: , , , , , , , , , , , , ,
피드 구독하기: 글 (Atom)