데이터 바인딩 (Data Binding)

 

Data Binding 이란 ?

 

Android Jetpack AAC의 구성요소 중 하나로

 

DataBinding 라이브러리는 프로그래매틱 방식이 아니라 선언적 형식을 사용하여 

 

레이아웃의 UI 구성요소를 앱의 데이터 소스에 결합할 수 있는 지원 라이브러리 이다.

 

 

* 프로그래매틱 방식 : java나 kt 파일의 onCreate 메서드 내에서 Textview.setText("~~"); 로 정의하는 방식

프로그래매틱 방식

 

 

* 선언적 형식 : xml의 android:text에 @{user.name} 와 같은 식으로 사용하는 형식

선언적 형식

 

두가지 방식에는 이런 차이가 있고 이중에서도 데이터바인딩은 선언적 형식을 사용한다.

 

 

예제 

그럼 바로 간단한 예제를 통해서 사용법을 알아보자.

 

오늘 해볼 예제는 학생이라는 데이터클래스의 내용을 간단하게 TextView 3개에 보여주는 예제다.

 

먼저 build.gradle(모듈 수준)에 다음 요소를 추가한다.

android {

    ...

    dataBinding {
        enabled = true
    }

}

 

 

 

Student 클래스 (데이터 클래스)

package com.example.databinding_aac

data class Student(val name: String , val age: Int , val hobby: String)

 

스튜던트 클래스는 이름 , 나이 , 취미로 이루어져있는 데이터 클래스다.

 

 

메인 레이아웃

<?xml version="1.0" encoding="utf-8"?>

<!-- xml 코드 전체에 layout 태그-->
<layout>

    <!-- 레이아웃 파일에서 데이터를 다루기 위해 data,variable 태그 추가-->
    <data>

        <!-- variable 태그 내 type 속성으로 다른 클래스를 참조-->
        <variable
            name="student"
            type="com.example.databinding_aac.Student" />

    </data>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        tools:context=".MainActivity">

        <!-- textView의 text 속성에 바인딩 문법 사용-->
        <TextView
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{student.name}"
            android:textSize="30sp"
           />

        <TextView
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{String.valueOf(student.age)}"
            android:textSize="30sp"
            />

        <TextView
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{student.hobby}"
            android:textSize="30sp"/>

    </LinearLayout>

</layout>

 

그동안 써왔던 방식과는 다른 레이아웃 폼인걸 코드를 보면 알 수 있다. 

 

기본적으로 최상단에 레이아웃 종류가 있는것이 아닌 <layout> 태그가 먼저 들어가고

 

그 안에 <data> 태그 안에 <variable> 태그 안에 내가 쓸 클래스가 지정되어 있는걸 볼 수 있다.

 

그리고 각 TextView의 text 값에는 student 의 값이 할당되어 있다.

 

 

메인 액티비티

package com.example.databinding_aac

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

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 바인딩 객체에 setContentView()
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main)

        // lifecycleOwner 지정 (Activity , fragment)
        binding.lifecycleOwner = this

        // student 객체 초기화
        val student = Student("Sam",31,"독서")

        // binding 객체의 student 값을 위에서 선언한 student 로 할당
        binding.student = student

    }

}

 

먼저 바인딩 객체 초기화 , student 객체 초기화 해준 후

 

binding 객체의 student 값을 새로 선언,초기화 해준 student 값을 할당 해준다.

 

 

 

실행 결과

실행 결과

 

 

 

오늘은 AAC 중에서 Data Binding 에 대해서 다루어 보았다.

 

이러한 데이터 바인딩의 장점을 정리하게 되면 

• findViewById()를 호출하지 않아도 자동으로 xml에 있는 View 들을 만들어 준다
• data가 바뀌면 자동으로 View를 변경하게 할 수 있다.
• xml 리소스만 보고도 View에 어떤 데이터가 들어가는지 파악이 가능하다.
• 코드 가독성이 좋아지고, 상대적으로 코드량도 줄어든다.

예제를 직접 만들면서 느낀점들은 데이터 바인딩과 뷰바인딩의 차이도 어느정도 알게 되었다.

 

 

결론적으로 단순한 사용 사례를 적용하려면 뷰 바인딩을,

 

그것이 아니라면 데이터 바인딩을 채택하는 것을 추천한다.

 

 

오늘 사용한 예제 깃허브

nam-su/DataBindingExample: 데이터 바인딩 예제 (github.com)

GitHub - nam-su/DataBindingExample: 데이터 바인딩 예제