데이터 바인딩(Databinding)이란?

오늘 알아볼 것은 뷰 바인딩 관련 문서를 찾다 보면 반드시 한 번은 보는 데이터 바인딩입니다. 뷰 바인딩을 모르고 보셔도 되지만 한 번 봐주세요 ㅎㅎ

뷰 바인딩

 

알아야 할게 너무 많다 ㅠㅠㅠ

---

정의

데이터 바인딩의 정의에 대해 공식 사이트에선 아래와 같이 말하고 있습니다.

데이터 결합 라이브러리는 프로그래매틱 방식이 아니라 선언적 형식으로 레이아웃의 UI구성요소를 앱의 데이터 소스와 결합할 수 있는 지원 라이브러리입니다.

기존 위젯(ex. textview)에 데이터를 넣는다고 생각해 보면

1.  xml에 직접 넣는다
2. findViewById로 위젯의 id를 참조해서 넣는다.
3. viewBinding으로 id를 참조해서 넣는다.

입니다. 3가지 방법을 보면 공통적으로 나오는 말이 있습니다.

"넣는다"

이와 다르게 데이터 바인딩에선 "결합"으로 표현하고 있습니다. 

즉, 위젯에 데이터를 직접 넣을 필요 없이 결합만 하면 알아서 데이터를 넣어주는 라이브러리로 정리할 수 있습니다.

어디서 많이 본 거 같지 않나요?

명령형 프로그래밍과 선언형 프로그래밍의 차이와 비슷합니다.

• 명령형 프로그래밍(기존방식) : 무엇을(ex. 데이터, 이벤트) 어떻게(ex. 뷰 참조, 뷰 바인딩) 넣을지 정의해줘야 한다.
• 선언형 프로그래밍(데이터 바인딩) : 무엇을(데이터, 이벤트) 해야 할지 정의하면 결합(데이터 바인딩)된 것을 기반으로 알아서 넣어준다.

---

기대효과

우리는 기능을 쓰기 전에 왜 써야 하는가? 를 꼭 알고 갈 필요가 있습니다.

그래야 올바른 곳에 사용할 수 있으니까요.

막 가져다 쓰면 체험 가능합니다 ㅋㅋㅋㅋ

 

1. Boilerplate code 제거 : 데이터 바인딩을 이용하면 뷰를 참조하는 코드(이벤트 리스너, 콜백)를 일일이 선언할 필요 없이 데이터를 넘기기만 하면 됩니다.
2. 가독성 증가 : UI 업데이트를 관리하는 코드의 양을 줄일 수 있습니다. 
3. 유지보수성 향상 : UI로직과 비즈니스 로직을 분리할 수 있습니다.
4. findViewById보다 훨씬 빠른 속도 : UI 업데이트할 때마다 위젯에 접근할 필요 없으므로 불필요한 객체 생성으로 인한 메모리 사용량을 줄일 수 있습니다. 

단점

일단 디버그 하기 까다롭습니다.

JetPack Compose로 넘어가면 UI도 선언형으로 선언하기 때문에 데이터 바인딩이 크게 쓸모없을 수 있다는 소문이 있습니다. 

아직 컴포즈를 안 해봐서 저 발언의 신빙성을 입증할 수 없지만 확신할 수 있는 것은 지금 시점으로 컴포즈가 상용화된 지 얼마 안됐고 레거시 코드들은 대부분 데이터 바인딩을 사용하고 있기 때문에 단점이라고 보기 힘듭니다.

마지막으로 뷰 바인딩에 비해 클래스가 많이 생기기 때문에 빌드 속도가 오래 걸립니다. 

---

구현

설정

가장 처음에 해줘야 할 것은 앱단의 build.gradle에 데이터 바인딩을 설정하는 것입니다.

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

코드

레이아웃

뷰 바인딩과 다르게 데이터 바인딩은 레이아웃에서 먼저 사용할 데이터를 선언해줘야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable
            name="ddd"
            type="String" />
        <import type="android.Manifest.permission"/>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{ddd + permission.ACCESS_FINE_LOCATION}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

데이터 바인딩은 <layout>를 루트 태그로 시작하고 <data> 요소 및 <view> 요소가 뒤따라 옵니다. 

<data>는 결합할 변수나 임포트 할 클래스를 선언하는 태그입니다. 

<variable> 태그는 결합할 변수의 이름과 타입을 정의합니다.

<import> 태그는 클래스를 임포트 하여 내부 프로퍼티와 메서드를 사용할 수 있습니다.

<TextView>의 android:text 속성을 보면 레이아웃 내에서 표현식은@{}를 이용하여 나타낼 수 있습니다.

코드 본문

class MainActivity : AppCompatActivity() {
	
    private lateinit var binding: ActivityMainBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        databinding()
    }

    fun databinding(){
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.lifecycleOwner = this
        binding.ddd = "testvalue \n"
    }
}

ActivityMainBinding 타입의 변수를 선언해줍니다. 

DataBindingUtil 클래스를 통해 현재 뷰를 설정해 줍니다.

바인딩된 데이터의 라이프사이클에 현재 액티비티의 컨텍스트를 넘겨줍니다.

이제 <variable>에서 선언한 변수명에 값을 집어넣으면 됩니다.

결과

잘 나오는 것을 볼 수 있습니다. 

뷰 바인딩이 나온 이후론 간단한 화면은 뷰 바인딩으로 처리하고 있지만 MVVM구조에는 꼭 필요한 개념이므로 잘 숙지하면 좋습니다. 

다음 포스팅 에선 데이터 바인딩의 표현식 언어와 이벤트 처리에 대해 다뤄보도록 하겠습니다.

GitHub - Huzit/DataBindingTest

---

참고

데이터 결합 라이브러리  |  Android 개발자  |  Android Developers