[Compose] 스크롤 안에 (뷰 페이저 + 스크롤) 있는 경우

(Column + verticalScroll) 안에 (HorizontalPager + LazyVerticalGrid)가 들어가면 wrapHeight가 안 된다.앱이 죽는다..에러 : Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. 그 경우 .heightIn(max = VIEWPAGER_MAX_HEIGHT.dp) 로 LazyVerticalGrid의 맥스 값을 지정 해주면해당 크기 만큼 설정이 된다. 문제점 : heightIn은 다음 페이지의 크기가 작아지면 wrap하게 된다. (각 페이지의 height)가 다를 수 있다.만약 1페이지의 크기와 2페이지의 크기..

[Compose] Scaffold: 내부 동작 원리와 UI 자동 조정 과정 분석

[Column + Scroll] 이나 lazyColumn 일 경우멀티 윈도우 앱 크기 줄였을 때 스크롤 끊기는 현상이 있었습니다.문제 재현 결론부터 말하자면 Scaffold로 해결 하였습니다. Scaffold란?Scaffold는 앱의 기본 UI 구조를 제공하는 컨테이너 컴포저블입니다.✔ topBar, bottomBar, floatingActionButton, drawerContent 등의 주요 UI 요소를 배치할 수 있도록 지원합니다.✔ contentPadding을 통해 콘텐츠 영역의 크기를 자동 조정하여, UI가 겹치거나 잘리는 문제를 방지합니다.✔ NestedScrollConnection을 활용해 내부 스크롤 이벤트 충돌을 방지하며, 시스템 UI(상태바, 네비게이션바)와의 겹침을 피하기 위해 Modi..

[Compose] 컴포즈 실전 내가 경험한 Tip !

mutableStateOf 사용시 유의할 점@Composable함수 내에서 mutableStateOf를 사용할 때, remember를 사용해야 한다.mutableStateOf 대신 mutableIntStateOf를 사용하는 것이 더 성능이 좋다 (린트 경고)Compose 매개변수 정렬 규칙필수 매개변수 (State 포함)이벤트 핸들러 (onClick, onChange 등)이벤트 핸들러는 “발생할 때”를 의미하기 때문에 현재형을 사용해야 함.modifier: Modifier = Modifier기본값을 가진 선택적 매개변수content: @Composable () -> Unit (Trailing Lambda, 선택적)예외 사항 (Trailing Lambda)Compose에서 onClick: () -> Uni..

Box, Row, Column, LazyColumn, LazyRow 기본 컨테이너에서 정렬 방법 1. Box- 자식 요소를 원하는 위치에 배치할 수 있는 컨테이너정렬 방법contentAlignment → 전체 자식 정렬Modifier.align() → 각 자식 개별 정렬Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center // 모든 자식 요소 기본 정렬) { Text( text = "이 텍스트는 오른쪽 상단!", modifier = Modifier.align(Alignment.TopEnd) // 개별 정렬 )}contentAlignment = Alignment.Center → ..

1. LiveData를 Compose에서 사용하는 방법LiveData는 Android의 UI 상태를 관리하는 기존 방식입니다.Compose에서는 observeAsState()를 사용하여 LiveData를 Compose 상태(State)로 변환할 수 있습니다.@Composablefun LiveDataExample(viewModel: MyViewModel) { val liveDataValue: String? by viewModel.myLiveData.observeAsState() Text(text = liveDataValue ?: "No data available")}📌 observeAsState()란?✔ LiveData를 State로 변환합니다.✔ LiveData의 값이 변경될 때마다 자동으로..

Compose에서 key의 역할과 사용법Compose에서 key는 컴포저블의 상태 유지 및 무효화 관리를 위한 중요한 개념입니다. 이를 올바르게 사용하면 효율적인 상태 관리와 UI 업데이트를 구현할 수 있습니다.  key의 역할과 사용하는 이유📌 key의 역할Compose의 재구성(Recomposition) 로직을 제어합니다.특정 값이 변경될 때 기존 상태를 무효화하고 새로운 상태를 초기화할 수 있습니다.📌 key가 상태에 미치는 영향 (상태 소멸 조건)key 값이 변경되면 기존 상태가 무효화되고 새로운 상태가 생성됩니다.새로운 객체가 생성되므로, 기존에 저장된 상태는 유지되지 않습니다.@Composablefun CounterWithKey(userId: String) { var count by ..

Paging3 클린 아키텍처 적용Paging3를 클린 아키텍처에 적용하다가 의문점이 생겼다.Domain 레이어에 있는 androidx.paging이 안드로이드 종속성이 있지 않나?사용하면 안되지 않나?그래서 찾아 보았다. 클린 아키텍처에서 Paging 3의 역할각 계층의 역할 Paging 3의 안드로이드 종속성 정리Paging 3은 여러 개의 모듈로 나뉘어 있으며, 각 모듈이 제공하는 기능을 이해해야 한다.📌  1. androidx.paging:paging-common (안드로이드 종속성 없음 ✅)implementation "androidx.paging:paging-common:3.x.x"✔ 멀티플랫폼(Kotlin Multiplatform)에서도 사용 가능 ✔ 안드로이드 종속성이 없으며, Domain ..

TextField의 여백 문제와 해결 방법Jetpack Compose에서 TextField를 사용할 때, 텍스트가 위쪽으로 쏠리거나 하단에 불필요한 여백이 생기는 경우가 있다. 특히 여러 줄 입력 (multiLine)을 허용할 때 이 현상이 두드러진다. TextField에서 여백이 생기는 이유1. TextField의 내부 패딩기본 TextField는 내부적으로 BasicTextField를 래핑하고 있으며, 기본 패딩이 포함되어 있다. 이 때문에 입력 텍스트가 위쪽으로 쏠리거나, 하단에 여백이 남을 수 있다.2. lineHeight을 조정해도 해결되지 않음보통 TextStyle에서 lineHeight을 조정하면 텍스트 정렬이 맞을 거라고 생각하지만, Compose에서는 Baseline기준으로 텍스트를 정렬..

= vs by의 차이는?Jetpack Compose에서 =와 by는 상태(state)를 사용하는 방식과 데이터 변경 추적 방식에서 차이가 발생합니다. 이는 Compose에서 상태를 올바르게 관리하고, UI를 효율적으로 갱신하는 데 중요한 개념입니다. =를 사용하는 경우=를 사용하면 State 객체 자체를 직접 저장합니다.var countState: State = remember { mutableStateOf(0) }동작 방식:countState는 State 타입이므로, 값을 직접 사용하려면 .value를 통해 접근해야 합니다.즉, UI에서 사용할 때 countState.value를 명시적으로 참조해야 합니다.예제)Text(text = "Count: ${countState.value}")Button(onC..

Modifier의 위치에 대한 이해컴포즈를 실제 적용하다보니 Modifier의 위치? 가 너무 헷갈렸습니다.이해를 돕기 위해 정리해 보았습니다!Jetpack Compose에서 modifier의 위치는 Composable의 유형(일반적인 UI 요소 vs. 레이아웃 컨테이너)에 따라 다르게 적용됩니다. 1. 일반적인 Composable 함수(@Composable 함수, Text, Button 등)에서의 Modifier 위치일반적인 Composable 함수(@Composable이 붙는 함수),Text, Button, Icon 같은 일반적인 UI 요소에서는 modifier가 필수 매개변수 뒤에 위치하며, 선택적 매개변수(color, fontSize 등)보다 앞에 배치됩니다.적용 규칙예제: Text의 Modifi..