[Compose] UI를 구성할 때 요소를 정렬하는 방법

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..

Modifier란?Modifier는 Jetpack Compose에서 UI 요소의 크기, 정렬, 배경, 패딩, 클릭 이벤트 등 다양한 속성을 조정하는 역할을 하는 객체입니다.레이아웃 조정: fillMaxSize(), size(), width(), height() 등스타일 적용: background(), border(), shadow() 등이벤트 처리: clickable(), pointerInput() 등애니메이션 효과: graphicsLayer(), alpha() 등Modifier는 체이닝 방식으로 여러 개를 연결하여 사용할 수 있으며, 적용 순서에 따라 UI가 다르게 동작할 수 있습니다.Modifier 예제Box( modifier = Modifier .fillMaxWidth() ..

컴포즈 코드 작성시 유의할 점(네이밍, 상태, 데이터 전달)이제 컴포즈 실전에 투입했다.공부 하고, 알아 보면서 유의할 점과 경험 했던 것들을 정리 해보려고 합니다.도움이 되시길 바랍니다.! 컴포저블 함수 네이밍파스칼 표기법(PascalCase): UI 컴포넌트형 컴포저블 함수는 HomeScreen처럼 대문자로 시작하는 단어들을 연결하여 선언합니다.카멜 표기법(CamelCase) + 동사구: 값을 반환하는 컴포저블 함수는 rememberScrollState처럼 소문자로 시작하며 동작을 표현하는 네이밍을 사용합니다. 상태 복제상태를 가공하거나 복제한 데이터를 전달하면, 전달된 데이터는 상위와 하위 사이에서 더 이상 동기화되지 않습니다.@Composablefun TransformedCounter(count:..

코드 작성시 유의할 점 - internal 함수이제 컴포즈 실전에 투입했다.공부 하고, 알아 보면서 유의할 점과 경험 했던 것들을 정리 해보려고 합니다.도움이 되시길 바랍니다.!예제들 보면 internal 접근 제어자가 붙은 것들이 있다.- 같은 모듈에서만 해당 요소를 사용할 수 있도록 제한 하는것.컴포즈 함수 작성시 유의해서 작성하면 좋을 것 같다. internal 함수Kotlin에서 internal 접근 제어자를 사용하면 같은 모듈 내에서만 해당 요소를 사용할 수 있도록 제한할 수 있습니다. 특히 Compose 함수를 작성할 때 유의해서 사용하면 코드의 모듈성을 높이는 데 도움이 됩니다.internal로 제한하는 이유1. 모듈 내부의 캡슐화 유지특정 모듈에서만 사용되는 요소는 내부 구현을 숨기는 것이..