본문 바로가기
728x90
반응형

전체 글126

(Compose) LazyColumn 연락처 목록, SNS 피드, 상품 리스트, 설정 화면까지... 앱을 만들다 보면 '목록'을 표시해야 하는 경우는 셀 수 없이 많습니다.Compose를 처음 배울 때 Column 안에 for문을 돌려 UI를 추가하는 방법을 떠올릴 수 있습니다. 하지만 아이템이 10개, 20개를 넘어 100개, 1000개가 된다면 어떻게 될까요? 앱은 심하게 버벅이다가 결국 비정상 종료될지도 모릅니다.이번에는 Compose에서 목록을 효과적으로 보여주기 위한 방법에 대해 알아보겠습니다.왜 Column이 아닌 LazyColumn?이 둘의 차이를 이해하는 것이 가장 중요합니다.Column: Column 안에 있는 모든 자식 Composable을 한 번에 메모리에 올리고 화면에 그립니다. 1000개의 아이템이 있다면 1000개 .. 2025. 8. 5.
(Compose) Modifier Jetpack Compose를 사용하다 보면 거의 모든 Composable 함수 끝에 modifier = Modifier... 코드가 따라붙는 것을 보셨을 겁니다. 처음에는 그저 "UI를 꾸미는 건가?" 싶지만, 사실 Modifier는 그 이상의 역할을 하는 Compose의 핵심 요소입니다.이번 내용에서 Modifier가 무엇인지, 어떻게 작동하는지, 그리고 왜 중요한지에 대해 깊이 파고들어 보겠습니다. Modifier란?Modifier는 이름 그대로 Composable을 수정(Modify)하는 역할을 합니다. Composable의 크기, 모양, 여백, 배경색을 바꾸는 것부터 클릭, 스크롤, 드래그와 같은 사용자 입력을 처리하는 것까지, UI 요소에 대한 거의 모든 '부가 속성'을 설정하는 데 사용됩니다.. 2025. 8. 4.
(Compose) 상태(state) 안녕하세요! 지금까지 Text, Button, Image, Column, Row 등을 이용해서 화면에 정적인 UI를 그리는 법에 대해 소개했습니다. 하지만 앱은 사용자와 상호작용하며 UI가 계속 변화하게 됩니다. Compose에서는 상태(state)라는 핵심 개념을 이용해서 이것을 가능하게 합니다. 상태(state)란?Compose에서 상태는 시간이 지남에 따라 변할 수 있는 모든 값을 의미합니다.체크박스의 체크 여부(boolean)사용자가 입력한 텍스트(String)버튼을 누른 횟수(Int)서버에서 받아온 데이터 목록(List )이 모든 것이 상태가 될 수 있습니다. Compose에서는 상태가 변경되는 것을 감지하면 해당 상태를 사용하는 UI 부분을 자동으로 다시 그려줍니다. 이 과정을 Recompos.. 2025. 8. 4.
(Compose) @Preview Android 개발을 하다 보면 작은 UI 수정 하나를 확인하기 위해서 적으면 몇 초에서 많으면 몇십 분씩 빌드를 기다리는 일이 너무 번거롭고 지겹습니다. Jetpack Compose는 이런 것을 해결하기 위해 @Preview 어노테이션을 제공합니다. @Preview는 앱을 빌드해서 확인하지 않고 Android Studio에서 Compose UI가 어떻게 보일지 즉시 렌더링 해주는 기능입니다. @Preview 사용법@Preview의 사용법은 놀라울 정도로 간단합니다. 그저 @Composeable 함수 위에 @Preview를 추가하면 됩니다.import androidx.compose.material3.Textimport androidx.compose.runtime.Composableimport androi.. 2025. 8. 4.
(Compose) Row, Column 안녕하세요! 이번 글에서는 Jetpack Compose의 가장 기본적이면서도 정말 많이 사용되는 컴포넌트인 Row와 Column에 대해 알아보겠습니다.이전 블로그 글에서 Text와 Button과 Image에 대해서 알아보았는데 이 컴포넌트들을 배치하는 방법에 대해서는 다루지 않았습니다. 또한 XML을 사용해서 UI 개발을 하던 개발자가 Compose를 처음 접한다면 “뷰(View)에서 LinearLayout을 세로/가로로 쓰던 걸 Compose에서는 뭘로 하지?”라는 생각을 할 수 있어요.바로 이때 등장하는 게 Row와 Column입니다.Row와 Column이란?Row: 자식 컴포넌트들을 가로 방향(수평)으로 배치Column: 자식 컴포넌트들을 세로 방향(수직)으로 배치뷰(View) 시절의 LinearL.. 2025. 7. 30.
(Compose) Image Jetpack Compose에서 이미지를 화면에 표시할 때 사용하는 Image 컴포넌트에 대해 소개합니다.앱을 만들 때 사진, 그림, 아이콘 등을 보여주는 건 거의 필수 기능인데요, Compose에서는 이 과정을 어떻게 처리할 수 있을지 알아보겠습니다.Image 컴포넌트란?Image는 단순히 말해 화면에 비트맵, 벡터, URL로 불러온 이미지 등을 보여주는 UI 컴포넌트입니다.Compose에서는 painter라는 개념을 이용해 이미지를 그리는데, 로컬 리소스뿐만 아니라 네트워크 이미지도 손쉽게 사용할 수 있습니다.Image( painter = painterResource(id = R.drawable.sample_image), contentDescription = "샘플 이미지")크기와 스타일 .. 2025. 7. 29.
728x90
반응형

티스토리툴바