[Design Pattern] 데이터 바인딩(Data Binding)

개요

어플리케이션에는 데이터가 있습니다.

그리고 그 데이터를 표시해주기 위한 프론트엔드(UI) 단도 있을테구요.

그렇다면 데이터를 표시하려면 어떻게 하는 게 좋을까요?

 

데이터 표시를 쉽게 관리하기 위한 디자인 패턴이 바로 데이터 바인딩입니다.

오늘은 데이터 바인딩에 대해 알아보도록 하겠습니다.

 

 

 

단방향 데이터 바인딩(One Way Data Binding)

데이터를 UI에 표시해준다.

가장 쉽게 생각할 수 있는 방법이 있죠.

각 UI 요소에 접근해서 데이터를 직접 삽입해서 출력하는 방법 말이죠.

 

간단하긴 합니다만, 프로젝트가 커지고 데이터가 많아지고 UI가 유기적으로 복잡해지면..

그럼 일일이 유지보수 하기 상당히 까다로울 것입니다.

일단 코드의 분량만 해도 상당할텐데, 그 모든 코드를 관리하는 건 괴롭죠.

데이터를 바꿔야 할 때마다 UI 요소에 일일이 접근해서 수정해주는 것도 번거롭구요.

 

그 단순 노동을 쉽게 해결하기 위해서 사용하는 것이 바로 단방향 데이터 바인딩입니다.

 

구성

 

Data -> UI(View) 를 자동화 시키는 것이 단방향 데이터 바인딩의 핵심입니다.

아래의 순으로 처리합니다.

 

1. 프레임워크 규약에 따라 Data와 UI를 매핑시킵니다.

2. 이제 Data가 변경되면, 자동으로 UI가 갱신됩니다.

 

Vue.js를 예로 들어 보겠습니다.

 

HTML

<div id ="instance">
	{{ text }}	<!--{{ }} 형식은 Vue.js에서 사용되는 데이터 바인딩 형식입니다.-->
	          	<!--Data의 text라는 데이터와 바인딩 되었음을 의미합니다.-->
</div>

JS

var app = new Vue({
	el: '#instance',
	data: {
		text: 'hello world' // 바인딩 되는 데이터입니다.
	}
})

결과

 

 

 

양방향 데이터 바인딩(Two Way Data Binding)

데이터가 정적일 경우 단방향 데이터 바인딩이면 충분합니다.

하지만 동적인 데이터(예를 들어 사용자의 입력을 받아 변경되는 데이터)의 경우는 어떨까요?

언제 데이터가 바뀔지 특정할 수 없기 때문에 UI에 반영하는 시점도 특정할 수 없습니다.

데이터 갱신 시 프론트엔드도 함께 갱신시키는 로직을 일일이 삽입해야 할 것 같네요.

하지만 이 역시 번거롭습니다.

 

이를 해결하기 위한 방법이 바로 데이터 바인딩입니다.

 

구성

 

Data <-> UI(View)

양방향으로 서로 영향을 주는 것이 양방향 데이터 바인딩입니다.

아래 순으로 처리됩니다.

 

1. 프레임워크 규약에 따라 Data와 UI를 매핑시킵니다.

2. UI를 통해 Data를 변경 가능하며, 그에 따라 Data와 연동된 UI들이 자동으로 갱신됩니다.

 

Vue.js를 예로 들면 아래와 같습니다.

 

HTML

<div id ="instance">
	<!--양방향 바인딩을 위한 input을 삽입합니다.-->
	<!--vue.js에서 v-model은 양방향 데이터 바인딩을 의미합니다.-->
	<input type="text" v-model:value="text">
    
	<!--단방향 데이터 바인딩과 동일하게 text를 데이터 바인딩 합니다.-->
	<div>{{ text }}</div>
</div>

JS

var app = new Vue({
	el: '#instance',
	data: {
		text: 'hello world' // 바인딩 되는 데이터입니다.
	}
})

결과

input에 입력한 값에 따라 다른 값을 출력합니다.
data.text 값도 동적으로 input의 값에 따라 변화합니다.