Android Jetpack - 4편 데이터 바인딩(Data Binding)이란?

이번에는 DataBinding을 알아보자

# 데이터 바인딩(Data Binding)이란?

간단하게 말하자면 데이터와 뷰를 연결하는 작업을 레이아웃에서 처리할 수 있게 해주는 라이브러리이다.

말로만 설명하면 이해가 안 될 수도 있기 때문에 아래 예시를 보자

fun main() {
   var textView = findViewById(R.id.sample_text)
   textView.Text("Hello")
}

원래는 텍스트뷰에 문자를 넣거나 변경하기 위해 코드상에서 집어넣는 작업을 해주었다.

그래서 Data Binding을 사용하면

<TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="@{user.name}"/>

코드를 작성하지 않고 레이아웃 파일에서 직접 데이터 바인딩 표현식을 사용하여 작성할 수 있다. 

이렇게 하면 자연스레 액티비티에는 로직만을 위한 코드만 남게 되고 뷰와 관련된 작업은 레이아웃 파일에 정의된다.

 

# 데이터 바인딩(Data Binding)과 뷰 바인딩(View Binding)

출처 : https://todaycode.tistory.com/31

그림에서 보면 데이터 바인딩은 뷰 바인딩 역할도 할 수 있을뿐더러 추가로 동적 UI 콘텐츠 선언, 양방향 데이터 결합도 지원한다.

그렇다고 해서 무조건 데이터 바인딩을 사용하라는 것은 아니다.

단순히 findViewById를 대체하기 위한 거라면 뷰 바인딩을 사용할 것을 구글에서는 권장하고 있다. 그러니 상황에 맞게 바인딩을 골라 사용하면 된다.

# 데이터 바인딩(Data Binding)의 장점

파일이 더욱 단순화되어유지관리가 쉬워지고 메모리 누수 방지, null 위험을 방지할 수 있는 장점이 있다.

 

# 데이터 바인딩(Data Binding) 사용법

1. bulid.gradle (Module) 추가

android {
    ...
   dataBinding {
            enabled = true
        }
}

2. Xml 수정

<activity_main.xml> 전체 코드

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
      <variable
            name="myText"
            type="String" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{myText}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

기존 xml코드에서 <layout> 태그를 가장 상위에 붙여주고,  연결 데이터를 표시하는 <data> 태그를 바로 아래에 붙여준다.

<data>
      <variable
            name="myText"
            type="String" />
    </data>

<data> 태그 안에 선언하고 싶은 변수를 <variable> 태그를 사용하여 선언한다.

<variable> 태그는 여러 개 선언 가능하며 name과 type 두 가지 속성을 갖는다.

name에는 변수 이름, type에는 변수의 자료형을 선언한다.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{myText}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

레이아웃 내의 표현식은 @{} 구문으로 작성한다. 이 예제에서는 TextView의 text를 연결하기 위해 android:text의 값을 위에서 선언한 myText변수를 넣어준다.

3. 클래스 파일에 데이터 바인딩(Data Binding) 적용

package com.example.databinding_ex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.databinding_ex.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.myText = "Hello World"
    }
}

ViewBinding과 같이 바인딩 객체를 생성해 아까 xml에서 만들어준 변수로 위에 예제처럼 접근할 수 있다.

 

보통 ViewModel + LiveData를 활용한 MVVM 패턴에 Data Binding이 사용된다. 

ViewModel + LiveData를 활용한 예제는 다음 편에 있다

참고 자료
https://hanyeop.tistory.com/170
아키텍처를 알아야 앱 개발이 보인다 - 옥수환 저자