Compose

Composable 함수의 의미 Composable 함수란 무엇일까요? Composable 함수는 Jetpack Compose의 가장 기본이 되는 요소이며, Composable 트리 구조를 작성하는 데 사용됩니다. 단순히 문법에만 초점을 맞춘다면, 코틀린 함수에 @Composable 어노테이션을 붙이는 것만으로도 Composable 함수를 만들 수 있습...

Jetpack Compose는 다양한 라이브러리들로 구성되어 있습니다. 이번 장에서는 Compose 컴파일러, Compose 런타임, Compose UI 세가지에 중점을 둘 것입니다. Compose Compiler와 Runtime은 Jetpack Compose의 핵심 요소입니다. 엄밀하게 말하자면, Compose UI는 Compose 아키텍처의 일부가 아...

이 챕터에서는 컴포즈 런타임의 내부 동작 원리와 UI, 컴파일러, 런타임이 서로 어떻게 소통하는지를 깊이 있게 다룹니다. 핵심은 컴포저블 함수가 변경 사항을 시스템에 알리면, 컴파일러가 주입해 둔 composer 객체가 이를 받아 처리하는 과정입니다. 그동안 우리가 막연하게 컴포지션이라고 불렀던, 런타임이 상태를 저장하고 유지하는 구체적인 방법에 대해 데...

지금까지 우리는 컴파일러가 어떻게 코드를 최적화하는지, 그리고 런타임이 어떻게 기본 구조를 잡고 작동하는지 배웠습니다. 이제 드디어 이 런타임 위에서 실제로 화면을 그려주는 클라이언트 라이브러리, Compose UI에 대해 알아볼 차례입니다. 시작하기에 앞서 이 책에서는 주로 Compose UI(안드로이드 및 데스크톱)를 예시로 들지만, 사실 Compo...

Jetpack Compose는 상태 스냅샷 시스템이라는 독특한 방식을 통해 반응형 UI를 구현합니다. 이 시스템 덕분에 데이터가 변경되면 관련된 UI만 자동으로 다시 그려집니다(Recomposition). 과거 안드로이드 View 시스템처럼 개발자가 수동으로 뷰를 갱신할 필요가 없어 코드가 훨씬 간결하고 안전해집니다. 📌 스냅샷 상태란 스냅샷 상태란 ...

사이드 이펙트 소개 이펙트 핸들러를 본격적으로 배우기 전에, 먼저 사이드 이펙트(Side Effect)가 무엇인지, 그리고 왜 Compose에서 이를 주의 깊게 다뤄야 하는지 알아보겠습니다. 사이드 이펙트란 무엇인가? 사이드 이펙트란 함수의 제어 범위를 벗어난 모든 작업을 의미합니다. 이를 이해하기 위해 먼저 순수 함수(Pure Function)를 살...

지금까지는 Compose를 안드로이드 UI 개발 도구로만 생각했을 수 있습니다. 하지만 Compose의 잠재력은 안드로이드나 UI 영역을 훨씬 뛰어넘습니다. 이번 장에서는 Compose의 더 넓은 활용 가능성을 이해하기 위해 핵심 개념을 살펴보겠습니다. Compose UI와 Compose Runtime의 분리 Compose의 내부 구조를 이해하려면 먼저...

들어가며 인스타 릴스를 보면, 설명란의 텍스트 하단에 그라데이션 페이드아웃 효과가 들어간 것을 볼 수 있습니다. 스크롤을 하면 실시간으로 텍스트에서 그라이데이션 페이드아웃이 적용되는 위치가 달라집니다. 만약 뒤에 이미지가 보이는 형태가 아니었다면, 텍스트 위에 그라데이션이 적용된 컴포넌트를 얹어서 구현할 수 있습니다 하지만 배경이 이미지라면 아래와 같...

들어가며 여러 애니메이션을 구현하다 보면, 저수준의 레벨에서 직접 커스텀해야하는 경우가 많습니다. 아래의 유튜브 뮤직 예시를 보겠습니다. 유튜브 뮤직에서는 아이템을 드래그하여 아이템의 순서를 실시간으로 바꾸고 있습니다. 이를 구현하기 위해 Compose에서 gest

1편에서는 pointerInput의 핵심 개념과 커스텀 롱프레스 구현까지, 드래그 정렬의 제스처 감지 레이어를 완성했습니다. awaitFirstDown → awaitCustomLongPress → drag()로 이어지는 200ms 커스텀 롱프레스가 state.onDra