Data Binding 기초

다음 중 당신이 알고 있는 Data Binding에 대해 알고 있는 것을 선택하세요~

. 전혀 모르는 내용임

. Visual Studio 6.0 때 사용했던 Binding

. IOS에도 사용하는 Binding

. XAML에서 사용하는 Binding

.해당사항 없음

데이터 바인딩~ 이 단어에 대한 다양한 생각이 존재할 것이다. 그만큼 여러 사람들이 사용하고 있기 때문이겠지.. 그런데, 누구나 알고, 쉽게 사용하다보니 그 진정한 의미에 대해서 생각하고 고민한 사람이 얼마나 있을까?

여기에, 내가 생각하고, 고민한 결과를 적어 보도록 하겠다. 

1. Data Binding의 의의

여기 제임스라는 남자가 한명 있다고 가정하자.

제임스는 하나의 객체(object)이고 그 객체는 이름, 성별, 나이, 국적이라는 프로퍼티를 가진다. 이 객체를 카메라를 이용해서 촬영을 하나 해 놓자. 찰칵~ 찰칵~

그런데, 잠시 후에 흑마법사(?)가 나타나서 이 남자에게 저주를 걸어서 좀비로 바꾸어 버렸다!!!

짜잔~ 헉..누구세요;;

여기서 당신이 조금 전에 촬영한 사진과 지금의 모습을 비교해 보자. 틀린 그림 찾기를 해도 괜찮다.;;;

아마, 당신의 사진과 지금 좀비의 모습과는 너무나도 다른 모습을 확인 할 수 있을 것이다. 즉, 사진은 자동으로 변화하지 않는다!!!

그러나, 만약 당신이 비디오 촬영을 하고 있었다면 변신하는 과정을 포함하여, 변신 후의 모습도 촬영을 하여.. 방송국에 제보를 하려고 했을지도 모른다;; (제보는 JTBC로..손석희 짱~)

왜 갑자기 제임스가 좀비로 변하는 것을 이야기하는 것일까?

사진은 이벤트드리븐 방식의 프로그램으로 만들어 놓은 화면이고, 비디오는 바인딩을 사용해서 만든 프로그램의 화면과 같은 것이다.

Batch data process(Event-driven application)

변신 전 James -> 사진 촬영 이벤트 -> James의 복사본을 사진으로 만듬

변신~

변신 후 James -> 사진 촬영 이벤트 -> 변신 후 James의 복사본을 사진으로 만듬

사진 촬영 이벤트가 발생하지 않으면, 사진이 새로 만들어 지지 않듯이, 화면 갱신을 위한 별도의 이벤트가 발생하지 않으면, 사용자 화면의 내용은 변하지 않는다.

Realtime data process(Data Binding, MVVM Pattern)

변신 전 James -> 비디오 촬영 시작 -> James와 화면 사이에 Data binding

변신~             -> 변하는 과정이 실시간으로 화면에 반영됨

변신 후 James -> 비디오 촬영 종료

비디오 촬영은 시작, 종료 2개의 이벤트가 필요하지만, 중간에 다른 이벤트가 없이 현재의 모습을 촬영하게된다. 바인딩을 이용하면, 각 속성이 변경되면, 즉시 사용자 화면에 내용을 갱신 시킨다.

우리가 사는 세상은 리얼 월드이다. 실시간으로 데이터가 변하며, 사용자는 변경된 데이터가 바로 반영되어 화면에 보기를 원한다. 이런 세상에 살고 있는 사용자를 만족시키려면, 개발자 또한 리얼타임(Realtime)으로 화면을 갱신 시키는 기술이 필요한 것이다.

 

이제는 서버와 클라이언트도 함께 엮어서 리얼타임 월드르 만들 수 있는 기술이 존재하는데..

리얼타임 월드 기술!!

Data Binding, SignalR, Reactive Extension

100마디 말보다 한번 해보면 대번에 알 수 있다.

* 아래 셈플은 오래전에 만들어진 것이라 Reactive Extension은 사용하지 않았습니다~

실버라이트 - 실시간 영화 예매 시스템 셈플

http://kaki104.tistory.com/160

실버라이트 - 1-50 Silverlight game sample

http://kaki104.tistory.com/190

객체의 속성을 실시간적으로 화면에 반영하는 기술..빨대 한번 꼽아 놓으면 빨대 빼기전까지 쭈우우욱~ 빨려오는 강력한 흡인력!! 한번 연결 시켜 놓으면 오래오래 지속되는 선언적 기술!!! 이 것이 .Net에서 이야기하는 Data Binding 입니다.

이제 리얼타임 월드에 입성 할 준비가 되었나요?.

2. 데이터 바인딩 개요

https://msdn.microsoft.com/ko-kr/library/ms752347(v=vs.110).aspx

오프라인 모임때 아래 내용을 중심으로 설명 드렸습니다. 글로 풀어서 쓰기가 어려워서 아래 내용만 남겨 놓습니다. 다음에 기회가 되면, 다시 설명하도록 하겠습니다.

* 기본 데이터 바인딩 개념

- 데이터 흐름의 방향

- 바인딩 만들기, 비주얼 스튜디오를 이용하기, 블랜드를 이용하기, 디자인 타임 소스, 디자인 타임에 데이터 보기

* 데이터 변환

* 컬렉션에 바인딩

- IEnumerable, IList, ICollection, ObservableCollection, ConcurrencyBag...

- CollectionViewSource

* 데이터 템플릿

* 데이터 유효성 검사

데이터 바인딩 방법 항목

https://msdn.microsoft.com/ko-kr/library/ms752039(v=vs.110).aspx

연습문제

1. 콤보박스에 바인딩하기

2. 2개의 콤보박스에 카테고리1, 카테고리2 바인딩하기

연습용 소스

DataBindingSample.zip

연습문제 풀이하신 후 블로그나 페이스북에 올려주시면 제가 작업핸 소스를 보내드리겠습니다~

직접 작업하는 즐거움을 누리세요~

참고

Data binding (XAML)

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758318.aspx

XAML Binding Basics 101

http://blogs.msdn.com/b/jerrynixon/archive/2012/10/12/xaml-binding-basics-101.aspx