💻 이미지로 배우는 중첩(Nesting) 구조이미지 예시를 보면 Column 안에 여러 개의 Row가 들어가 있는 중첩 구조인 것을 알 수 있습니다. 이것이 Compose UI를 구성하는 가장 보편적인 방식입니다.1. 전체 틀은 Column (파란색)가장 바깥쪽을 Column으로 감싸서 전체적인 레이아웃이 세로로 흐르게 만들었습니다.modifier = Modifier.fillMaxWidth().padding(top = 16.dp): 이 설정 덕분에 카드가 화면 가로 전체를 꽉 채우고 상단에 여유 공간(Padding)을 가지게 됩니다.2. 세부 줄은 Row (빨간색)Column 내부에서 '본명', '생일', '설명'과 같은 각 항목은 Row를 통해 가로로 정렬됩니다.verticalAlignment = A..
안녕하세요! 안드로이드 개발 생태계가 '명령형'에서 '선언형'으로 완전히 탈바꿈했습니다. 단순히 도구가 바뀐 것이 아니라 UI를 대하는 철학 자체가 달라진 것인데요. 구글이 제시한 차세대 UI 빌드 도구, Jetpack Compose의 핵심을 파헤쳐 보겠습니다.1. 시장의 흐름: Compose는 이미 대세입니다.기술 도입을 고민하고 계신가요? 시장의 수치가 그 답을 말해주고 있습니다.압도적인 성장세: 2021년 정식 출시 이후, 3년 만에 안드로이드 개발 비중이 20%에서 70%로 급격히 상승했습니다.검증된 안정성: 구글 플레이스토어를 필두로 X(트위터), 에어비앤비 등 고도의 안정성을 요구하는 글로벌 서비스들이 이미 메인 UI 도구로 채택하여 운영 중입니다.커리어의 필수 조건: 이제 신규 프로젝트의 ..
![[Jetpack Compose] 리스트를 효율적으로! LazyColumn 완벽 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fc1uGKF%2FdJMcabQs0Hf%2FAAAAAAAAAAAAAAAAAAAAAGcuNdEJym3YEceHlPnfiNSXD_W4dMGfN8YjO6iFyFMv%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3DSrypymI6WEW0C2LQyXTkX7Kr6Ms%253D)
안녕하세요! 오늘은 Jetpack Compose에서 데이터를 리스트 형태로 보여줄 때 필수적으로 사용하는 LazyColumn에 대해 알아보겠습니다.기존 안드로이드 개발(XML)에서 리스트를 만들려면 RecyclerView, Adapter, ViewHolder 등 설정해야 할 것이 정말 많았죠? Compose에서는 LazyColumn 하나로 이 모든 과정을 매우 직관적이고 간단하게 해결할 수 있습니다. 1. LazyColumn이란?LazyColumn은 화면에 보이는 아이템만 렌더링하는 컴포넌트입니다.만약 1,000개의 아이템이 있는 리스트를 한꺼번에 생성한다면 메모리 부하가 엄청나겠죠? LazyColumn은 사용자가 스크롤을 내려서 화면에 보여질 때만 해당 아이템을 생성하기 때문에 성능 면에서 매우 효율적..
![[Jetpack Compose] remember와 MutableState 완벽 이해하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FJWIiO%2FdJMcaiWkcXG%2FAAAAAAAAAAAAAAAAAAAAAIVhEmEDe2HnO12YjhMrCm3WxMQk9fONdWXd_40b7gAV%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1782831599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252F%252Fb9cXxL%252Fp5Kzqx60fhe6RNSRmE%253D)
안녕하세요! 화면의 상태 를 다룰 때 필수적으로 사용하는remember와 MutableState에 대해 알아보겠습니다.1. 왜 그냥 변수로는 안 될까요?전통적인 XML 방식과 달리, 컴포즈는 데이터가 변하면 함수를 다시 실행(Recomposition)하여 화면을 그립니다. 하지만 일반적인 변수를 선언하면 함수가 다시 호출될 때마다 값이 초기화되어 버립니다.@Composablefun Counter() { var count = 0 // 리콤포지션이 일어날 때마다 다시 0이 됩니다! Button(onClick = { count++ }) { Text("클릭 횟수: $count") }}함수가 재생성되면서 count를 다시 0으로 만들기 때문이죠. 이 문제를 해결하기 위해 필요..
1. 오해 바로잡기: StateFlow는 원래 Hot입니다.Flow: Cold Stream (수집자가 없으면 데이터를 생성하지 않음)StateFlow / SharedFlow: Hot Stream (수집자가 있든 없든 데이터를 가지고 있거나 발행함)2. 그럼 stateIn과 shareIn은 왜 존재하나요?우리가 데이터 소스(예: DB, 네트워크)로부터 받아오는 데이터는 보통 일반적인 Cold Flow인 경우가 많습니다.문제 상황: 이 Cold Flow를 UI에서 그대로 사용하면, 화면을 돌리거나 새로운 구독자가 생길 때마다 DB를 다시 조회하거나 네트워크 통신을 처음부터 다시 시작하게 됩니다. (리소스 낭비)해결 방법: 이 Cold Flow를 Hot Flow(StateFlow/SharedFlow)로 "업그..
상태(State)"란 무엇인가? - 특정 시점에 사용자가 화면에서 보고 있는 모든 정보 를 의미합니다. 1. 실생활 예시로 이해하기스마트폰의 배터리 아이콘을 생각해 보세요.배터리가 80%일 때 -> 초록색 아이콘 (상태 A)배터리가 15%일 때 -> 빨간색 아이콘 (상태 B)충전기를 꽂았을 때 -> 번개 모양 아이콘 (상태 C)여기서 배터리 잔량(숫자) 은 데이터이고, 그 데이터에 따라 변하는 아이콘의 모양과 색상이 바로 상태입니다. - StateFlow UI는 상태를 바라보기만 한다: UI는 "상태가 변하면 알려줘, 내가 알아서 바꿀게"라고 선언합니다.데이터의 일관성: 화면을 돌리거나 다른 화면에 갔다가 돌아와도 상태만 잘 보존되어 있다면 UI는 항상 올바른 모습을 유지2. StateFlow의 5가지 ..