728x90 반응형 전체 글111 (Compose) Lifecycle - Composition의 탄생부터 소멸까지 Jetpack Compose를 사용하다 보면 우리는 상태가 바뀌면 UI가 알아서 업데이트된다는 마법을 경험합니다. 이 마법의 비밀은 Compose가 컴포저블의 생명주기(Lifecycle)를 어떻게 관리하는지에 숨어 있습니다.오늘은 컴포저블이 컴포지션(Composition)에 들어와서 사라지기까지, 그 여정을 함께 따라가 보겠습니다. 이 글을 이해하면 왜 remember를 써야 하고, 언제 LaunchedEffect를 사용해야 하는지 명확한 그림을 그릴 수 있게 될 것입니다.Composition?Composition은 Compose가 컴포저블 함수들을 실행하여 UI를 설명하는 트리 구조를 만드는 과정입니다. 이 트리는 UI의 '설계도'와 같습니다. 이 설계도가 만들어지고, 변경되고, 사라지는 것이 바로 컴.. 2025. 8. 8. (Compose) Stateful vs Stateless Jetpack Compose로 UI를 만드는 것은 레고(Lego) 블록으로 멋진 작품을 조립하는 것과 같습니다. Text, Button, Image 같은 기본 블록들을 가지고 우리는 무엇이든 만들 수 있죠.그런데 만약 여러분이 만든 레고 블록이 특별한 임무를 부여받았다면 어떨까요? 예를 들어, '파란색 자동차의 왼쪽 바퀴'로만 사용될 수 있는 블록처럼 말입니다. 이 블록은 다른 어떤 작품에도 쓸 수 없는 '일회용' 부품이 되고 말 겁니다.코드의 세계도 마찬가지입니다. 우리가 무심코 만든 컴포넌트가 혹시 '특정 상황에서만 동작하는' 일회용 부품이 되어가고 있지는 않나요? 오늘 우리는 우리의 컴포넌트를 어떤 작품에든 쓸 수 있는 만능 레고 블록처럼 만드는 설계 비법, Stateful과 Stateless의 세.. 2025. 8. 7. (Compose) Compose UI Test 우리는 이제 멋진 화면을 만들고, 목록을 표시하고, 화면을 이동하는 방법까지 알게 되었습니다. 하지만 우리가 만든 코드가 앞으로도 계속 올바르게 동작할 것이라고 어떻게 보장할 수 있을까요? 디자인을 조금 바꾸거나 로직을 리팩터링 했을 때, 앱의 다른 기능이 고장 나지는 않았는지 어떻게 확인할까요?매번 눈으로 모든 화면을 클릭해보는 것은 지치고 실수하기 쉽습니다. 이럴 때 필요한 것이 바로 자동화된 UI 테스트입니다. 오늘은 Jetpack Compose로 UI 테스트 코드를 작성하는 기본 방법을 알아보겠습니다.UI 테스트, 왜 귀찮은 일을 추가하면서까지 해야 할까요?어느 화창한 오후, PM에게서 간단한 요청을 받습니다."결제 화면의 '구매하기' 버튼 색깔을 좀 더 눈에 띠는 파란색으로 바꿔주세요. 그리고 .. 2025. 8. 5. (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. 이전 1 2 3 4 ··· 19 다음 728x90 반응형
