1. 데이터 바인딩이 무엇인가?
데이터 바인딩을 검색해서 오는 사람들이라면 내가 그랬던것 처럼 기초를 공부하는 단계에서 수준이라고 생각을 한다. 내가 데이터 바인딩을 공부할때는 알아듣지도 못하는 용어들로 설명을 해주는 글들이 많아서 볼때마다 뒤로가기를 여러번 눌렀다. 그래서 몇 일 전까지 초보자였던 내가 같은 초보자들을 위해 쉽게 이해할 수 있게 글을 작성해 보았다.
초보자 입장에서 데이터 바인딩을 왜 해야 되냐 라고 물어보면 [ 코드의 가독성이 좋아지고 자동으로 UI를 업데이트 해준다.] 라고 대답을 할 수 있다.
" 자동으로 UI를 업데이트 해준다" 라는게 그렇게 특별한가라고 생각 할 수있지만, 프론트엔드에서는 화면을 보여주는 것이 목표이다. 만약 화면에 보이는 데이터가 변하면 변환 데이터가 화면에 보이게 렌더링(새로 고침)을 해주어야한다. 데이터 바인딩을 사용하게 된다면 추가적인 코드가 없이도 데이터가 변할때마다 자동적으로 렌더링을 해준다.
2. 데이터 바인딩 사용법( activity )
데이터 바인딩은 Activity, Fragment 중 어디에 사용할지에 따라 바인딩 방법이 달라진다. 이 블로그에서는 Activity로 데이터 바인딩을 사용할것이다.
이번 실습을 통해 만들고자 하는것은 아래와 같다.
목표: 버튼을 누르면 화면의 텍스트가 변화하는 앱
데이터바인딩은 다음과 같은 순서로 사용하며 된다.
1. Gradle 파일 설정( 앱 모듈 수준)
안드로이드 스튜디오의 기본적인 Gradle파일은 총 3가지이다. 나도 처음엔 app 모듈 수준 그래들이 어디있는지 헷갈렸기 때문에 자세히 설명을 해주면 우선 아래 사진과 같이 안드로이드 스튜디오 왼쪽 맨 위에 폴더 보기를 android로 설정해준다.
여기서 누가봐도 app이라고 써져있는 gradle에 databinding을 설정해주면된다.
위 이미지에서 빨간색 부분은 내가 binding을 하기 위해 추가한 코드이다. 아래의 코드를 추가해주면된다.
android {
...
buildFeatures {
dataBinding = true;
}
}
2. XML ( DatabInding )
처음 프로젝트를 생성하면 MainAcitivy와 activity_main.xml이 있다. 우리는 activity_main.xml에서 데이터 바인딩 준비를 해주면된다.
xml의 제일 상위 태그로 <layout></layout>으로 감싸주면 되는데 나는 다음과 같은 방법으로 했다.
1. 현재 가장 상위 태그 오른쪽 클릭 -> Show Context Actions
2. Conver to data binding layout 클릭
위 과정을 거치면 xml의 제일 상위 태그로 <layout></layout>이 감싸진다.
3 . XML (TextVIew, Button)
데이터 바인딩 처리후 간단하게 아래코드와 같이 TextView와 Button을 만들었다.
<?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>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
4. MainActivity
데이터 바인딩을 사용하므로 우리는 렌더링 View의 설정을 바꾸어주어야한다. 기존에있던 setContentView라는 코드를 없애고 아래의 코드를 작성해주어야한다.
// setContentView(R.layout.activity_main);
binding = ActivityMainBinding.inflate(getLayoutInflater());
setContentView(binding.getRoot());
데이터 바인딩을 사용하지 않을때는 버튼 클릭 이벤트를 만들때 아래와 같은 코드로 작성했었다.
바인딩 처리 전
Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});우리는 위에서 Xml에 상위 태그에 layout을 처리 하였기 때문에 ActivityMainBinding이라는 클래스가 생성이 된다(xml 파일 명 +Binding)
바인딩 처리 후
ActivityMainBinding binding;
binding.button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});ActivityMainBinding binding을 onCreate함수 밖에서 선언하고
binding.button처럼 우리가 xml에 작성하였던 id를 바로 설정 할 수 있게 된다.
버튼 클릭 이벤트 안에서 사용할 textView또한 아래 코드처럼 binding으로 접근이 가능하다.
binding.button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
binding.textView.setText("Bye World!");
}
});
이렇게 하면 우리가 목표로 했던 앱을 만들 수있다. 사실 이번 예제에서는 코드의 간결성만 강조가 되었기에 다음 블로그 포스팅때는 자동으로 UI를 업데이트 해준다라는 강점을 살리는 앱을 만들어 볼 것이다.