Jetpack Compose개념

JINA·2022년 1월 25일
0

Android/Compose

목록 보기
1/1
post-thumbnail

What's new in Jetpack Compose
위의 영상을 보고 정리한 글입니다.😃

Compose란?

  • 시대가 변하면서 기기 성능의 향상과 더불어 앱에 대한 기대가 높아지면서 최신 아키텍쳐을 기반으로 코틀린을 활용하는 선언적 UI도구 키트인 Jetpack Compose가 나오게 되었다.

  • XML 레이아웃을 수정하거나 Layout Editor를 사용하는 대신 Jetpack Compose 함수를 호출하여 원하는 요소를 말하면 Compose 컴파일러에서 나머지 작업을 완료할 수 있다.

compose의 주요 개념 2가지

1. Declarative


기존의 xml을 사용하는 방식은 데이터가 바뀌면 UI도 업데이트 해줘야 했음.
ex)데이터베이스 혹은 네트워크가 호출될때, 사용자와의 인터랙션이 끝나면 새로운 정보로 UI를 업데이트해서 데이터를 동기화해야했음.

compose를 사용하면 상태를 바로 UI로 변환함. UI는 한 번 생성하면 변경이 불가능하기 때문에 compose는 위의 사진처럼 앱 상태가 바뀌면 UI전체를 다시 생성함.
(변경되지 않았다면 다시 생성하지 않음.)

코드는 특정 상태에 대한 UI형태를 설명할 뿐이지 어떻게 생성하는지는 설명하지 않음.
🤔그럼 대체 어떻게 상태를 UI로 변환하는걸까???
-> 데이터를 매개변수로 받아서 UI를 전달하기 때문에 UI가 동기화 상태에서 벗어나지 않음.

상태, 메세지 목록이 바뀌었을때 위의 함수를 실행하면 새로운 UI가 생성됨.
이를 리컴포징이라고 함.


🙄메세지 목록은 어떻게 바뀌는지?
-> 콜 스택을 처리하는 동안 ViewModel이 메세지의 liveData를 보여줌.
-> 데이터를 관찰함. -> messages 필드를 읽는 컴포저블은 새 데이터가 업데이트 될때마다 리컴포저블됨.

이 과정을 직접 관찰할 필요없이 Compose 컴파일러는 어느 컴포저블이 상태를 읽는지 추적하고 상태가 바뀌면 자동으로 다시 실행함.(입력이 변경된 컴포저블만 다시 실행함.)

단, 각 컴포저블은 변경할 수 없고 컴포저블을 참조하거나 내용을 업데이트 할 수 없음.
정보를 입력할때는 모두 매개변수로 컴포저블에 전달해야함.

하지만 위의 내용이 컴포저블이 고정돼 있다는 뜻은 아님!!
예시를 들자면

view 방식에서는 체크박스를 누르면 체크박스에 체크가 생겼었음. 하지만 컴포저블에서는 체크박스를 눌러도 체크가 생기지 않음. 왜냐하면 체크박스의 상태는 상수로 전달했기 때문임. 체크가 생기도록 하려면 checked를 false에서 true로 바꿔줘야함.

체크박스를 클릭하면 onCheckChange 이벤트를 제공하는데, 이 콜백에서 체크 선택여부를 결정하는 변수를 바꿀 수 있음. 이렇게 하면 체크박스를 눌렀을 때 체크가 생김.


위의 콜백처럼 상태를 바꾸지 않으면 체크박스를 눌러도 아무런 변화가 없다는 것을 이해하는게 중요함. 이 내용이 바로 선언적 UI의 핵심 개념임. 이렇게 하면 만약 검증을 실행해서 유효할 때만 디스플레이를 업데이트하고 싶을 경우 코드로 완전히 통제하기 때문에 검증이 실패한 시점에 다시 돌아와서 변경을 취소할 필요가 없음.

요소는 전달되는 매개변수가 완전히 통제함.

단일 진실 공급원를 제공하는데, 이는 동기화 해야할 상태를 없애는 것을 의미.

🧐만약 입력된 데이터가 바뀌어서 리컴포지션을 호출하더라도 유지하고 싶은 변수가 있다면?
-> remember을 사용하면 이전의 값을 기억할 수 있고, 기억한 값을 통해 재할당을 방지하거나 상태를 고정할 수 있음.

위의 내용을 더 구체적인 예시로 보자면

state와 update lamda를 컴포저블의 매개변수로 전달하고 단일 진실 공급원으로 로직을 쌓을 수 있음.

선언적 UI의 핵심

  • 특정 상태의 UI를 완전히 설명함.
  • 상태가 바뀌면 프레임워크에서 UI업데이트를 처리함.


Compose는 여러가지 어플리케이션 아키텍쳐와 호환되지만 단방향 데이터 플로우를 따르는 아키텍처와 잘맞음.

viewModel이 화면 상태의 단일 스트림을 노출 -> Compose UI에서 관찰 -> 각 구성요소의 매개변수로 전달 -> 각 구성요소는 필요한 상태만 수신하므로 데이터를 바꿀 때만 업데이트 하면됨.

ViewState 객체의 단일 스트림을 생성하면 상태 변경을 한 곳에서 처리하는데 도움이 됨.(전체적인 화면 상태를 추론하고 오류를 낮추기 쉬움.) 이 패턴을 사용하면 입력에 따라 완전히 제어되기 때문에 간단하게 컴포저블을 테스트 할 수 있음.


2. UI Toolkit

composable은 다양한 UI구성요소 도구키트를 제공함. Jetpack Compose는 머터리얼 디자인 구성요소와 테마시스템을 구현하고, 어플리케이션을 어셈블하는 데 필요한 구성요소도 제공함.

Buttons, Cards, FABs, AppBars등이 해당하는데, 모든 구성요소는 기본적으로 material 스타일링을 따르고

material테마를 구현하기 때문에 모든 구성요소를 브랜드에 맞게 원하는대로 커스텀할 수 있음.(색, 도형, 서체 스타일 등 지정가능)

Compose는 간단하지만 강력한 새로운 레이아웃 시스템을 제공하는데 행과 열을 기반으로 하는 가로와 세로 선형 레이아웃과 비슷하다고 보면 됨. View방식과 달리 Compose레이아웃 모델은 여러 척도로 전달할 수 없어서 중첩된 레이아웃에 적합함.

척도와 배치를 직접 설정해서 레이아웃을 만들고 싶다면 위처럼 함수를 구현하면 됨.

Compose에서 크게 개선된 기능은 애니메이션 시스템임. 훨씬 간단하게 사용할 수 있고 보다 효과적이고 간단하게 UI에 모션을 줄 수 있음.


Compose 장점

  • 접근성
    Compose는 UI에 병렬트리를 생성하는 시멘틱 시스템을 기반으로 접근성 서비스에 더 많은 정보를 제공하거나 UI요소를 매칭해서 사용하는데 도움이 됨.

  • 테스트
    Compose는 테스트 기능을 극대화하는 전용 테스트 아티팩트를 제공하고 독립적으로 컴포저블을 테스트하는 간편한 API를 제공함. 테스트 규칙에서 clock이 노출되고 그 후 UI가 업데이트되고 이를 제어하기 위한 API가 제공됨.


이는 애니메이션 코드를 테스트할 때도 테스트를 완전히 통제할 수 있음.

Compose는 코틀린으로만 개발됐고, 우수한 언어 기능을 활용해 강력,간결,직관적인 API를 구축할 수 있음.

코루틴을 사용하면 간단한 비동기식 API를 작성할 수 있음.(제스처, 스크롤, 애니메이션 등)
제스처를 애니메이션으로 핸드오프하는 것처럼 비동기식 이벤트를 결합한 코드를 간결하게 작성할 수 있음. 구조적 동시성을 통해 이런 취소와 정리를 제공함.

코틀린은 툴링으로 구성된 강력한 에코시스템이 있는데, UI구성요소를 새로운 함수로 추출해서 간단하게 재사용할 수 있음.

Compose는 앱이 다크모드에 반응하도록 간편하게 테마를 설정할 수 있음.
시스템이 다크모드인지 체크->색상표 전환
Compose는 모든 테마가 런타임에서 실행되기 때문에 기본 테마 외에 동적테마도 손쉽게 지원함.

Compose는 필요에따라 점진적으로 도입할 수 있음.
화면의 작은 요소부터 UI의 큰 부분이나 화면 전체를 교체하면 됨.

Views에 Compose를 포함할 수 있고 Compose에서 Views를 호스팅할 수도 있음.
(Compose로 구축되지 않은 컨텐츠를 표시할 때 유용)

View와의 상호운용성 외에도 다른 주요 라이브러리와의 통합을 제공함.
material또는 Appcompat XML테마를 Compose로 변환할때는 어댑터를 제공함.

@Preview를 통해 구성요소와 함께 레이아웃을 미리 볼 수 있음. 또한 독립적이고 반복적으로 개선할 수 있고, 미리 구현한 애니메이션을 바로 확인할 수 있음.

🎯용어정리

단일 진실 공급원(single source of truth, SSOT)

  • 정보 모형과 관련된 데이터 스키마를 모든 데이터 요소를 한 곳에서만 제어 또는 편집하도록 조직하는 관례를 이른다. 데이터 요소로의 가능한 연결(관계 스키마 내의 다른 영역이나 원거리의 연방 데이터베이스에서도 올 수 있음)은 모두 참조로만 이루어진다.
  • 데이터가 위치한 다른 모든 곳들은 단지 으뜸되는 "진실 공급원"의 위치를 참조하기만 하므로, 으뜸되는 위치의 데이터 요소를 갱신하면 수정 사항 반영을 빠뜨릴 데이터의 사본이 존재할 가능성 없이 시스템 전체에 전파되게 된다.
    데이터 스트림(Data Stream)
  • 데이터의 흐름
  • 작은 데이터 조각들이 하나의 줄기를 이루며, 순서대로 물 흐르듯이 전송되는 데이터 열(列)

단일 진실 공급원 위키피디아

0개의 댓글