지난 시간에, 우리는 젯팩 컴포즈의 코드가 어떤 역할을 하는지 뜯어봤고, 이 정보를 바탕으로 투두 리스트와 같은 앱을 만들어 보았습니다. 그런데, 애매하게 설명하고 넘어간게 있지 않았나요?

Slot

투두 리스트의 MyApp 코드를 잠시 볼까요?

@Composable
fun MyApp(innerPadding: PaddingValues) {
    var list by rememberSaveable { mutableStateOf(listOf<String>()) }

    Column(modifier = Modifier.padding(innerPadding)) {
        CreateTodo {
            list = list + it
        }
        TodoList(list)
    }
}

graph TD
  MyApp --> Column
  subgraph Column
  CreateTodo
  TodoList
  end

위 코드에서, Column은 안의 내용을 받아서, 적당한 위치에 위치시킵니다.

TextButton(onClick = { onRemove(i) }) {
	Text("Remove")
}

graph TD
  subgraph TextButton
	  Text
  end

이 코드도 마찬가지로, Text를 받아서 버튼 안의 적당한 위치에 놓습니다.

이처럼, 특정한 내용을 받아서, 해당 내용을 다른 컨텐츠 안의 빈 공간에 렌더링하는 컴포넌트가 있습니다. 이런 빈 공간을 Slot이라 합니다. Slot에 내용을 넣기 위해서, 해당 컴포저블을 호출하며 내부 렌더링 시에 호출될 함수를 인자로 넘겨 주면 됩니다.

Modifier

modifier은 스타일과 같은 일부 속성을 수정해주는 것입니다. 영어 다 하시죠?

Modifier는 Jetpack Compose에서 Composable 함수의 요소(예: Text, Button 등)에 속성들을 추가하는 데 사용되는 객체입니다. Modifier를 사용하면 요소의 크기, 배치, 배경, 패딩 등을 지정할 수 있습니다. 또한 사용자 입력(예: 클릭, 스크롤)이나 애니메이션 등을 처리할 수 있습니다.

Modifier은 생성자 호출 후, 함수들의 체인으로 만들 수 있습니다. 아래와 같이요.

import androidx.compose.ui.Modifier
import androidx.compose.foundation.padding
import androidx.compose.foundation.background
import androidx.compose.ui.unit.dp

Text(
    text = "Hello, Jetpack Compose!",
    modifier = Modifier
        .padding(16.dp)
        .background(Color.Cyan)
)

Modifier의 주요 기능

Modifier는 다양한 속성과 기능을 제공합니다. 몇 가지 주요 기능을 살펴보겠습니다.

아래는 아무 modifier가 없는 간단한 앱입니다. 여기에 modifier을 적용하면 어떻게 되는지 살펴볼까요?

@Composable
fun MyApp(innerPadding: PaddingValues) {
    TextField("Hello, World!", {})
}