Upgrade to Pro — share decks privately, control downloads, hide ads and more …

선언형 UI가 대세임을 선언합니다

선언형 UI가 대세임을 선언합니다

Compose 학습부터 실제 적용까지

HyunWoo Lee

April 01, 2023
Tweet

More Decks by HyunWoo Lee

Other Decks in Programming

Transcript

  1. 선언형 UI가 대세임을 선언합니다


    Compose 학습부터 실제 적용까지
    이현우 Mathpresso Inc.


    Android/React Native Developer

    View full-size slide

  2. Compose, Ӓ द੘
    যڃ ҅ӝ۽ Composeܳ द੘೮חо?


    যڌѱ ҕࠗܳ ೮חо?

    View full-size slide

  3. #Android Dev Challenge

    View full-size slide

  4. #Android Dev Challenge

    View full-size slide

  5. Compose 걸음마 떼기
    Compose가 Stable Release 된 이후


    Devfest Codelab과 같은 커뮤니티 스터디를 활용하여


    Compose Codelab을 간단하게나마 훑어보기


    QANDA에 도입된 Compose 코드와 디자인 시스템 코드를


    활용하여 Compose UI/디자인 이해하기


    View full-size slide

  6. Am I Stuck?
    Compose۽ ೞա੄ জਸ ٜ݅যաт ٸ
    Compose۽ ೞա੄ ӝמ ઁ੘ೡ ٸ
    Compose Codelab ݃ச ٸ

    View full-size slide

  7. React Native
    <- >
    Jetpack Compose
    React Native 개발을 하면서 알게 된 지식 Jetpack Compose에서 사용되는 지식

    View full-size slide

  8. 사이드 프로젝트에 적용해보기

    View full-size slide

  9. Why Compose?
    Declarative UI/Recomposition


    State Hoisting

    View full-size slide

  10. 선언형 UI

    View full-size slide

  11. 선언형 UI
    State에 맞춰서 UI가 그려진다


    개발자가 직접 State를 설정할 필요가 없어져
    Human Error의 가능성이 현저히 떨어짐


    Android Composable 함수들의 호출로 새로운 UI
    Component가 만들어짐


    빠르게 본인이 원하는 형태의 UI를 그릴 수 있음

    View full-size slide

  12. Recomposition
    Composable 함수를 구성하는 State가 변경될 때, Composable을 갱신시키는 것

    View full-size slide

  13. Recomposition

    View full-size slide

  14. Recomposition

    View full-size slide

  15. Smart Recomposition

    View full-size slide

  16. Smart Recomposition
    Smart Recomposition이 보장되어있지 않다

    View full-size slide

  17. @
    Stable
    Use
    @
    Stable annotation to make skippable state

    View full-size slide

  18. @
    Immutable,
    @
    StableMarker
    Use
    @
    StableMarker annotations to make skippable state

    View full-size slide

  19. State Hoisting
    State
    ->
    UI 공통적으로 사용하는 State는 최소 공통 조상 LCA 에게 할당

    View full-size slide

  20. Side Effect
    Declarative UI Function & Side Effect

    View full-size slide

  21. 선언형 UI
    F STATE
    =
    UI
    함수는 상태 STATE 에 따라 UI를 그려주는 액션을 취함

    View full-size slide

  22. 그렇다면…
    F STATE
    =
    UI
    그러면 UI를 그려주는 동작 이외의 것들은?

    View full-size slide

  23. Side Effect
    Composable 함수의 목적 UI 렌더링 이외의


    앱 상태의 변경사항

    View full-size slide

  24. React React Native 에서는?

    View full-size slide

  25. React React Native 에서는?
    학생들의 정보를 DataSource 서버, 로컬 저장소 등


    에서 가져오기 위한 함수

    View full-size slide

  26. React React Native 에서는?
    classId가 변하는 경우에만 위의 함수를 호출한다 Dependency Key
    Dependency Array가 비어있는 경우, UI Component가 올라왔을 때 한 번만 호출

    View full-size slide

  27. React React Native 에서는?
    UI Component가 화면에 올라올 때 함수가 호출됨

    View full-size slide

  28. React React Native 에서는?
    UI Component가 화면에서 안 보일 때 자동으로 함수가 종료됨

    View full-size slide

  29. React React Native 에서는?
    매 Re rendering Recomposition 마다 호출

    View full-size slide

  30. 그럼 Compose에서는?
    함수 scope 내에서 suspend function 호출 가능

    View full-size slide

  31. LaunchedEffect
    useEffect에서 Dependency Array가 비어있는 경우
    =>
    Composable 함수가 처음 불릴 때 호출

    View full-size slide

  32. LaunchedEffect
    useEffect에서의 Dependency Array
    =>
    isSuccess, progress가


    변경되면 내부 호출

    View full-size slide

  33. DisposableEffect
    isSuccess, progress가 변경될 때에만 호출

    View full-size slide

  34. DisposableEffect
    isSuccess, progress가 변경될 때에만 호출
    Composable이 화면에서 안보일경우 자동으로 해제

    View full-size slide

  35. SideEffect
    매 Recomposition마다 호출함

    View full-size slide

  36. 이외에도
    produceState
    derivedStateOf
    snapshotFlow
    rememberCoroutineScope

    View full-size slide

  37. Conclusion
    And Then…

    View full-size slide

  38. F STATE
    =
    UI
    Compose로 UI 구현하기


    Layout/Modifier/Animation


    Style Design System

    View full-size slide

  39. F STATE
    =
    UI
    UI 상태 관리하기


    State/State Hoisting/Architecture Layering


    CompositionLocal

    View full-size slide

  40. F STATE
    =
    UI
    App 품질 관리/유지보수


    Performance Recomposition/Stability


    Side Effect/Architecture Layering


    Testing/Accessibility

    View full-size slide

  41. Compose Your Self

    View full-size slide

  42. Compose, Your Development

    View full-size slide

  43. 이현우 Mathpresso Inc.


    Android/React Native Developer

    View full-size slide