728x90 반응형 전체 글113 (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. (Compose) Button 이번 글에서는 Jetpack Compose의 가장 기본적이면서도 사용자와 상호작용 할 수 있는 UI 컴포넌트인 Button에 대해 이야기해보려고 합니다.Button 컴포넌트란?Compose에서 버튼은 Button() 함수를 사용해 구현합니다.예를 들어, 화면에 간단한 버튼 하나를 만들고 싶다면 이렇게 작성할 수 있습니다.var count by remember { mutableStateOf(0) }Button(onClick = { count++ }) { Text("클릭 수: $count")}onClick 파라미터에 클릭 시 동작을 넣고, 버튼 안에는 Text를 사용해 표시할 글자를 넣습니다. XML 시절보다 훨씬 간단하고 직관적입니다.버튼에 색상과 모양 추가하기Compose의 버튼은 다양한 속성을 통.. 2025. 7. 29. 이전 1 2 3 4 5 ··· 19 다음 728x90 반응형
