Jetpack Compose basics – 성능 좋은 목록 만들기

좀 더 현실적인 이름 목록을 만들어보자! 지금까지는 Column에 직접만든 greeting 함수를 사용하여 아이템을 2개만 나타냈었다. 하지만 만약 1000개 또는 그 이상을 다뤄야 한다면 어떨지 상상해보자. Greetings에 있는 매개변수 기본 목록 값을 변경하고, 목록의 사이즈 및 내용을 람다 표현식으로 채울 수 있는 다른 목록을 사용해보도록 하자. 이 목록을 사용하면 1000개의 greeting을 더보기…

Jetpack Compose basics – State Hoisting(상태 끌어올리기)

컴포저블 함수에서 다양한 함수들에 의해 불러와 지거나 수정되어지는 상태(state)는 공통적인 부모내에 존재한다. 이러한 처리를 상태 끌어올리기(state hoisting) 이라고 한다. hoist의 의미는 끌어 올려지는 것을 의미한다.(lift or elevate) 상태를 끌어올려 만들면 중복되는 상태 및 버그를 피할 수 있고, 컴포저블 함수의 재사용성과 테스트 용이성을 상당히 좋게 만들수 있다. 컴포저블 함수의 부모가 제어 더보기…

Jetpack Compose basics – Compose에서의 상태(State)

Compose의 상태  지금까지는 정적인 레이아웃을 만들었지만 이제 사용자 액션에 반응하도록 만들어 보자. 어떻게 버튼을 클릭가능하게 만들고 아이템의 사이즈를 조절할 수 있는지 알기 전에, 각각의 아이템이 확장되거나 축소되는 상태값을 어딘가에 저장해야만 한다. 앞에서 만든 Greeting 함수별로 이러한 값을 가질 필요가 있기 때문에, 논리적으로 생각해보면 이러한 값은 Greeting 내에 있어야 한다. 하지만 더보기…

Jetpack Compose basics – 행과 열로 아이템 구성

행과 열로 아이템 구성하기 Compose에 포함된 Column, Row, Box와 같은 표준 레이아웃 3요소가 있다. Column, Row, Box도 composable 함수다. 이 함수들은 다른 composable 요소들을 내부에서 각기 다른 형태로 배치 한다. 예를들어 다음과 같은 코드가 있다고 가정하자. @Composable private fun Greeting(name: String) { Surface(color = MaterialTheme.colors.primary) { Column(modifier = Modifier.padding(24.dp)) { 더보기…

Jetpack Compose basics – 수정 및 재사용

UI 수정하기 Greeting 함수의 배경색을 변경해보자. ‘Text’ composable 함수를 ‘Surface’ composable 함수로 감싸고, Surface의 색상을 MaterialTheme.colors.primary로 변경해보자. @Composable private fun Greeting(name: String) { Surface(color = MaterialTheme.colors.primary) { Text (text = “Hello $name!”) } } Surface로 감싸진 내부의 컴포넌트은 배경색이 다음과 같이 변경될 것이다. 근데 자세히 보면 텍스트가 흰색으로 변경 되었다. 더보기…

Jetpack Compose basics – Compose 시작하기

Jetpack Compose란? Jetpack Compose는 UI 개발을 단순화하도록 설계된 최신 툴킷으로, 간결한 반응형 프로그래밍 모델과 Kotlin 프로그래밍 언어의 쉬운 사용성을 결합한다. 프로젝트에 대한 Compose 설정은 공식문서를 참조하자. Compose는 선언형 UI 툴킷이다. 컴포즈는 완전히 선언형 프로그래밍(Declarative programming) 방식이다. App은 정적인 데이터만을 표현하지 않는다. 사용자 또는 시스템 등에 의해 변화무쌍한 동적인 데이터를 표현하게 된다. 더보기…