심기일전 코틀린! - 02. Jetpack Compose (1)

Compose 란 무엇인가

Compose 에 대해 알기위해선 Jetpack 에 대해 먼저 알아야한다.

Android Jetpack 문서에서는 Jetpack 에 대해 이렇게 설명하고 있다.
"개발자가 중요한 코드에 집중할 수 있도록 권장사항 준수, 상용구 코드 감소, 여러 Android 버전과 기기에서 일관되게 작동하는 코드 작성을 돕는 라이브러리 묶음"

출처 : https://developer.android.com/jetpack?hl=ko 

Android Jetpack 개발자 리소스 - Android 개발자  |  Android Developers

라이브러리 묶음이라는 말에서 알 수 있듯이 Compose 는 Jetpack 에서 제공하는 라이브러리 중 하나로

UI를 구성하기 위한 도구 키트이다.

 

Compose 를 왜 써야하는가

공식 문서에서는 Compose 를 사용해야 하는 이유를 다음과 같이 설명하고 있다.

1) 간단한 코드

코드가 간단하며 유지 관리하기 쉽다.

2) 직관적인 API

앱 상태가 변경되면 UI가 자동으로 업데이트 된다.

3) 빠른 개발 과정

기존의 모든 코드와 호환되어 언제 어디서든 원하는대로 사용할 수 있다.

4) 강력한 성능

Android 플랫폼 API에 직접 액세스하고 기본적으로 지원하는 다양한 기능을 사용할 수 있다.

출처 : https://developer.android.com/jetpack/compose?hl=ko 

Jetpack Compose UI 앱 개발 도구 키트 - Android 개발자  |  Android Developers

 

지금부터 위의 근거를 하나씩 살펴보자.

 

1) 간단한 코드

간단한 리스트 화면을 하나 만든다고 가정해보자.

Layout xml 파일에 RecyclerView를 선언하고 Activity에서 setContentView로 inflate한 후에

Adapter와 Holder로 리스트 아이템의 뷰와 동작을 선언해줘야한다.

<!-- activity_main.xml -->
...
<RecyclerView
	android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
...

//MainActivity
...
lateinit var binding: ActivityMainBinding
lateinit var adapter: ListAdapter
...
fun init() {
	binding.list.layoutManager = LinearLayoutManager(this)
    binding.list.adapter = adapter
}

//ListAdapter
class ListAdapter: RecyclerView.Adapter<Holder>() {

	val list = arrayOf("안녕", "반가워")
	
    ...
    override fun onBindViewHolder(holder: Holder, position: Int) {
    	holder.setData(list[position])
    }
    ...
    
    class Holder(binding: ItemListBinding): RecyclerView.ViewHolder(binding.root) {
    	val binding: ItemListBinding
        
        init {
        	this.binding = binding
        }
        
        fun setData(text: String) {
        	binding.textView.text = text
        }
        
    }
    
}

리스트 하나를 만들기 위해 이렇게나 많은 클래스와 설정이 필요하다.

 

하지만 이것을 Compose 를 사용해 만들면 간단하게 줄일 수 있다.

class MainActivity: AppCompatActivity() {

	val list = arrayOf("안녕", "반가워")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
			App()
        }
    }
    
    @Composable
    fun App() {
    	//세로 방향으로 뷰가 정렬되는 컴포넌트
    	Column {
        	//리스트의 사이즈만큼 Text 컴포넌트를 생성
        	list.foreach { text ->
            	Text(text = text)
            }
        }
    }
    
}

물론 이건 어디까지나 간단한 예시이지만

Compose를 사용하면 기존의 길고 복잡한 방식의 코드를 간결하고 보기쉽게 대체할 수 있다는 장점이 있다.

다음편에서 계속