[Jetpack Compose] 컴포즈 Codelab 기초 따라하기

Jetpack Compose

[Jetpack Compose] 컴포즈 Codelab 기초 따라하기 - 1

베르_최성훈 2023. 12. 19. 20:46

Jetpack Compose 를 시작하면서 코드랩을 따라하면서 작성한 글입니다. 파란색 글씨는 개인적인 생각입니다.

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#0

Compose 시작하기

Composable function 은 @Composable 어노테이션이 달린 함수이다.

그럼 이 함수 내부에서 다른 @Composable 함수를 호출할 수 있다.

Text 는 라이브러리에서 제공하는 컴포저블 함수이다. 이 함수를 내부에서 호출한 Greeting 은 컴포저블 어노테이션이 붙은 컴포저블 함수인 것이다. Greeting 함수는 name 문자열을 출력한다.

Compose 를 사용해도 Activity 가 Android 앱의 진입점으로 유지된다. setContent 에서 레이아웃을 정의하는데 기존 뷰 시스템의 XML 파일 대신 이 함수에서 컴포저블 함수를 호출하면 된다.

- Theme : 패키지 이름과 동일하게 만들어져있는 ComposeCodelabFirstTheme 함수가 있는데 이는 컴포저블 함수의 스타일을 지정하는 방법이다.

- Preview : AndroidStudio 미리보기를 사용하려면 @Preview 주석으로 표시하고 프로젝트를 빌드하면 된다. 동일한 파일에 미리보기를 여러 개 만들고 이름을 지정할 수도 있다.

Preview 와 실제 보여지는 화면이 달라질 수 있구나.. 이렇게 설계된 의도가 무엇일까?

Composable 의 장점을 살리기 위해서라고 생각한다. 컴포넌트를 각각 만들고 미리보고 조립하고 하기 위해서겠지?

그러면 실제 화면을 구성할때 미리보기와 실제 화면 중복이 필요한가...?

그 의문은 아직 풀리지 않으니 계속 따라가보자.

UI 조정

이제 Greeting 에 다른 배경 색상을 설정해보자. Surface 로 래핑하면 된다.

배경 색깔만 바꿨는데 글자 색깔이 같이 흰색으로 바꼈다.. 뭐지?

다 비슷하게 생각하는지 코드랩에서 친절히 설명해놨다.

따로 정의하지 않았지만 Surface 같은 Material 구성요소는 foundation 의 다른 기본 구성 요소를 기반으로 더 나은 환경을 만들도록 빌드된다.

Surface 는 배경이 primary 색상으로 설정될 때 모든 텍스트가 onPrimary 색상을 사용해야한다고 인식힌다.

Modifier

modifier 를 사용해 UI 요소가 배치되고 표시되고 동작하는 방식을 정의할 수 있다.

Composable 재사용

구성요소가 많아지면 중첩 레벨이 더 많아진다. 함수가 커지면 가독성에 영향을 줄 수 있으니 중복되는 것들은 분리해 라이브러리를 만들고 독립적으로 수정해 사용하자.

함수는 기본적으로 빈 modifier 가 할당되는 modifier 매개변수를 포함하는 것이 좋다. 매개변수로 modifier 를 전달해 외부에서 레이아웃 웃을 조작할 수 있게 만든다.

열과 행 만들기

위는 Column, Row, Box 는 세가지 기본 표준 레이아웃 요소이다.

Greeting 을 변경해 Column 을 만들어보자.

- Preview

Hello 와 name Text 를 새로로 배치하기위해 Column block 안에 순서대로 배치했다. 버튼과 텍스트는 반대로 가로로 배치해야하므로 Row 함수 블럭 안에 Column 과 ElevtedButton 을 추가했다.

다음으로 이 Greeting 을 목록으로 만들어보자

names 를 전달하면 개수만큼 목록을 그린다.

여기까지 하면 리사이클러뷰, 리스트뷰 처럼 스크롤이 될 줄 알았는데 스크롤은 되지 않는다. 단순히 세로로 배치한 것이다.

챕터 이름중에 목록에 애니메이션 적용이 있는거 보니 조금만 더 기다려보자..

Compose 에서의 상태

화면에 상호작용을 추가할 수 있다. 만들어 놓은 정적 레이아웃에 버튼을 클릭하면 상세 보기가 나오도록 펼쳐지고 다시 클릭하면 접히게 만들어보자.

현제 항목이 펼쳐진 상태인지 접힌 상태인지 저장할 필요가 있다. 이 값의 논리적 위치는 Greeting 컴포저블에 있다.

이렇게 변수를 추가하고 상태에 따라 클릭했을 때 접기, 펼치기 글씨가 바뀌게 만들었다. 그러나 이는 동작하지 않는다.

컴포즈에서 이 값의 변화를 상태 변경으로 감지하지 않기 때문이다!!

Compose 앱은 Composable 함수를 호출해 데이터를 UI 로 변환한다. 데이터 변경시 새 데이터로 이 함수를 다시 실행해 업데이트한 UI 를 재구성한다. 이를 리컴포지션이라고 한다. 또한, 데이터가 변경된 구성요소만 다시 구성하고 영향을 받지 않는 구성요소는 다시 구성하지 않고 건너뛴다.

위에서 expended 변수가 변경되었을 때 리컴포지션 이 트리거되지 않는 이유는 이 변수를 컴포즈에서 추적하지 않기 때문이다. 또한 Greeting 이 호출될 때마다 false 로 초기화된다.

컴포저블 함수에 내부 상태를 추가하려면 mutableStateOf 함수를 사용해야한다.

하지만 이 함수만 사용하면 리컴포지션간 상태를 유지할 수 없다. 여러 리컴포지션 간에 상태를 유지하려면 remember 를 사용해 상태를 기억해야한다.