[Jetpack Compose] 위젯에 대해

 

기존의 명령형 UI 개발 방식에서는 setContentView() 함수를 이용해 Activity 에 표시할 xml 을 불러왔었다.

선연형 UI 개발 방식인 Jetpack Compose 에서는 xml 을 사용하지 않으므로 setContentView() 함수 대신 setContent {} 를 사용하고 이 내부에 여러 위젯들을 작성하는 방식으로 레이아웃을 표시한다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 여기에 위젯들 선언
        }
    }
}

 

위젯이 뭔데

Jetpack Compose 는 여러가지 위젯을 이용해 UI 를 개발한다.

 

텍스트를 표시할 때 사용되는 Text() 위젯, 이미지를 표시할 때 사용되는 Image() 위젯, 공간을 지정할 때 사용되는 Box() 위젯 등 각 상황에 알맞은 위젯을 선언함으로서 뷰를 구성한다.

 

빨강색 글자이고 10 dp 의 Padding 을 가진 텍스트 뷰를 선언하는 샘플 코드이다.

Text(
	modifier = Modifier.padding(10.dp),
	color = Color.Red,
	text = "텍스트 입니다",
)

각 위젯들에는 위 샘플 코드에서의 modifier, color, text 같이 뷰를 커스텀할 수 있는 property 들이 존재한다.

따라서 상황에 맞는 적절한 property 들을 이용해 뷰를 구성할 수 있다.

 

위 샘플 코드에서 보이는 modifier 같이 대다수의 위젯에 존재하는 property 들도 있지만, 특정 위젯들에만 존재하는 text 와 같은 property 들도 있어 많은 사용을 통해 익숙해져야 할 것 같다.

 

근데 비즈니스 로직이랑 같이 있으면 너무 길고 지저분해질것 같은데

선언형 UI 개발의 장점 중 하나는 code based 로 UI 를 개발할 수 있다는 것이다.

 

따라서 코드의 재사용성이 높아지는데, 위 샘플 코드에서 만든 텍스트 뷰를 2개 더 생성해 총 3개의 텍스트 뷰가 필요하다고 치자.

그럼 그냥 단순하게 생각해보면 아래와 같은 형태의 코드일 것이다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(
                modifier = Modifier.padding(10.dp),
                color = Color.Red,
                text = "1번 텍스트 입니다",
            )
            Text(
                modifier = Modifier.padding(10.dp),
                color = Color.Red,
                text = "2번 텍스트 입니다",
            )
            Text(
                modifier = Modifier.padding(10.dp),
                color = Color.Red,
                text = "3번 텍스트 입니다",
            )
        }
    }
}

동일한 property 의 동일한 위젯을 3개 생성해놨다.

여기서 조금만 더 생각해 선언형 UI 의 강점인 코드의 재사용성을 살린다면 아래와 같은 코드로도 변경할 수 있다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            RedText("1번 텍스트 입니다")
            RedText("2번 텍스트 입니다")
            RedText("3번 텍스트 입니다")
        }
    }
}

@Composable
fun RedText(textValue: String) {
    Text(
        modifier = Modifier.padding(10.dp),
        color = Color.Red,
        text = textValue,
    )
}

코드량도 줄어들었고 가독성도 훨씬 좋아진 것을 확인할 수 있다.

 

@Composable 이 무슨 뜻이죠

Jetpack Compose 에서 레이아웃을 구성하는 setContent{} 내부에서는 Composable 함수들만 호출할 수 있다. Composable 함수는 @Composable 어노테이션을 붙여 선언할 수 있다.

 

추가로, @Preview 어노테이션이 붙은 Composable 함수를 볼 수 있는데 이 함수 내부에 정의된 위젯들은 Android Studio 우측 상단의 Split 탭을 클릭했을 때 표시되는 화면을 통해 구성된 레이아웃을 미리 볼 수 있다.