데이터 바인딩(Data binding)

▩ 목 차 ▩

1. 데이터 바인딩(Data binding)

      1-1. 데이터 바인딩이란 ?

      1-2. 데이터 바인딩과  뷰 바인딩 비교

      1-3. 데이터 바인딩 사용법

            1-3-1. gradle 추가

            1-3-2. 액티비티

            1-3-3. 레이아웃

      1-4. 데이터바인딩의 대한 생각

---

MVVM 디자인 패턴을 알기 위해서 몇 가지 사전지식이 필요했고, 그 중에 데이터 바인딩은 뷰와 xml을 연결을 해줄때 효율적으로 연결해주고 꼭 필요한 기술이라 생각하여 공부를 했다. 여기서 중요한 점은 왜 뷰 바인딩과 비교해서 어떻게 효율적인지를 꼭 알아야 된다고 생각을 하며 공부를 했다.

( 데이터 바인딩을 공부하기 전 뷰 바인딩을 미리 공부를 하였고, 이것을 데이터 바인딩과 비교하면서 공부를 할 수 있었다. 그렇기에 데이터 바인딩을 공부하기 전 뷰 바인딩을 먼저 공부하고 보는 것을 추천드리겠다. )

뷰 바인딩(view binding)

---

 ■ 1. 데이터 바인딩(Data binding) ■

데이터 바인딩이란 xml에 Data를 연결하는 작업을 말한다. Android JetPack 라이브러리 중 하나이다. findViewById를 사용하지 않아도 되며, 주로 MVVM패턴, LiveData와 함께 사용된다.

 

 

 ■ 1-1. 데이터 바인딩이란 ?

우리가 finViewById를 쓰거나 뷰 바인딩을 쓸 때는 액티비티 혹은 프래그먼트 코드상에서 값을 집어넣는 작업을 했다. 아래와 같이 말이다.

// findViewById 쓸 때
textView.text = "하이" 
 
// 뷰 바인딩 쓸 때
binding.textView.text = "하이"

위와 같이 액티비티 혹은 프래그먼트 코드상에서 값을 집어넣어서 해결하는 방법 말고 레이아웃을 형성하는 xml에 코드(값)를 집어넣어서 해결하는 방법이 있다.

==> 이렇게 xml에 코드(값)을 넣게되면 기존의 애기비티에는 로직만을 위한 코드만 남게 되고 뷰와 관련된 작업은 레이아웃 파일에 정의되는것 이다. 우리는 이것을 데이터 바인딩 이라고 부른다.

---

 ■ 1-2. 데이터 바인딩과  뷰 바인딩 비교

 

위의 그림을 통해 알 수 있는 점은 데이터 바인딩은 뷰 바인딩의 역할은 물론, 추가로 동적 UI 콘텐츠 선언, 양방향 데이터 결합도 지원한다.

==> 그렇다면 무조건 데이터 바인딩을 사용하면 좋겠구나 !

아니다. 데이터 바인딩이 기능은 다양하지만, 뷰 바인딩이 상대적으로 간단하며 퍼포먼스 효율이 좋고 용량이 절약된다는 장점이 있기 때문이다. ( 구글 공식문서에는 단순하게 findViewById를 대체하기 위한 거라면, 뷰 바인딩을 사용할 것을 권장하고 있다.)

그러니까 간단한 프로젝트라면 뷰 바인딩을 사용하면 좋을 것이고, 대규모 프로젝트라던지 mvvm 패턴을 적용할 시 데이터 바인딩을 사용하면 좋을 것이다.

---

 ■ 1-3. 데이터 바인딩 사용법

 

■ 1-3-1. gradle 추가

 

안드로이드 스튜디오 4.0 이상 일 때

// 안드로이드 스튜디오 4.0 이상
android {
    ...
    buildFeatures {
        dataBinding = true
    }
}

 

안드로이드 스튜디오 3.6 ~ 4.0 일 때

// 안드로이드 스튜디오 3.6 ~ 4.0
android {
    ...
    dataBinding {
        enabled true
    }
}

---

■ 1-3-2. 액티비티

데이터 바인딩도 뷰 바인딩과 크게 다를 게 없다.

firstName과 lastName을 저장하는 UserProfile 클래스를 만들어 이름을 저장해주었다.

class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
 
        binding.user = UserProfile("지은", "이")
    }
}

---

■ 1-3-3. 레이아웃

데이터 바인딩을 사용하기 위해서 우리가 기존에 알고 사용하던 레이아웃 구조를 조금 바꾸어야 한다.

<layout> 태그가 가장 바깥쪽에 위치해있으며, 그 안에 <data> 태그와 우리가 사용하던 레이아웃이 들어가는 형태이다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="user"
            type="com.example.selfstudy_kotlin.UserProfile" />
    </data>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{user.firstName}" />
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{user.lastName}" />
    </LinearLayout>
</layout>

<data> 태그 안에 있는 <variable>는 데이터와 뷰를 연결하는 태그이다.

type에 연결하고 싶은 데이터가 있는 경로를 적어주고 name에 사용할 이름을 정해주면 된다.

 

예를 들어, 위의 코드의 경우 'user를 통해 'UserProfile'의 데이터 접근이 가능하다.

변수를 사용할 때는 '@{}' 구문 안에 넣어주면 된다.

firstName에 접근하고 싶다면 @{user.firstName} 이런 식으로 말이다.

 

@{}구문 안에는 간단한 식을 넣을 수도 있다.

EX) @{(userProfile.gender == UserProfile.GENDER_MALE) ? "남성" : "여성"} >> 오류 처리가 난다. 이유는 xml 안에서 데이터 처리를 하기 위해선 이스케이프 처리를 해줘야 하기 때문이다.

==> 이스케이프 처리 : @{(userProfile.gender == UserProfile.GENDER_MALE) ? &quot남&quot : &quot여성&quot}

이처럼 @{}구문의 표현식은 단위 테스트가 불가능하고 IDE 지원이 제한적이기 때문에 아주 간단한 식을 사용하기에 적절하다.

( 사용 가능한 표현식의 종류는 https://developer.android.com/topic/libraries/data-binding/expressions?hl=ko 에서 확인 가능하다. )

---

■ 1-4. 데이터바인딩의 대한 생각

액티비티 소스코드 내에 XML Layout을 조작하는 코드를 분리해 내면 소스코드의 가독성이 높아진다. 구글이 제공하는 데이터바인딩은 뷰객체에 데이터 설정을 액티비티 코드에서 XML로 옮기는 것을 도와주는것이며, 뷰 바인딩에서는 가능하지 못한 동적 UI 콘텐츠 선언, 양방향 데이터 결합이 가능(추후에 배울 예정)하여 mvvm 디자인 패턴에 사용되는 것인 것 같다.

 

---

참고

LiveData(라이브 데이터)란?