#108_닷넷(.NET)_ WPF_ 데이터 바인딩 (Binding)의 이해

안녕하세요 삽잡이입니다.

이번 시간부터는 WPF의 핵심 기술인 바인딩에 대해서 알아보려고합니다.

바인딩이라는 기술이 있는 덕분에

코드를 굉장하게 유연하게 가져올 수 있게 됩니다.

바인딩이라는 용어는 간단하게,

사용자와 대화하는 UI 요소와 개념적으로 객체를 연결하는 것을 의미합니다.

바인딩을 하기 위한 목적의 핵심은 두가지입니다.

바로, '동기화'와 '형식 변환'입니다.

우선, 왜 바인딩을 하는데에 동기화가 필요할까요?

ADO.NET에서 데이터 테이블을 누군가 변경하게 되면, 

테이블들이 다 변경되게 했듯이

즉, View에 연결되어있는 녀석들은 모두 Sync를 이루어 변경됬었습니다.

Sync가 없으면 이리 저리 변경되면 다시 최신화를 시켜야하고

여러모로 수정할 일들이 많았습니다.

그런데, 바인딩 기술을 사용하게 되면, 자동화를 시켜주기 때문에

이러한 불편사항들을 없앨 수 있게 됬지요.

RGB는 데이터로 존재하지만,

UI로 R은 20, G는 40, B는 130이라는 값으로 나오면 될까요?

데이터 정수로 들어있는 RGB로 화면으로 출력될 때에도 

정수로 출력되야하냐 이겁니다.

색으로 변환되어 출력이 될 것 아니겠습니까?

이처럼, 바인딩은 데이터와 UI의 Sync를 이루도록 해주는 기술로써,

이러한 처리를 자동으로 할 수 있도록 형식변환을 해줘야하지요.

UI 요소와 연결되어있는 데이터 객체와 동기화를 시키는데,

사실 바인딩은,

데이터 객체의 속성과 UI의 속성과 바인딩이 되는 것입니다.

Data는 Unknown 객체라고 해서

어떤 객체와 바인딩 될지는 모르지만, 

객체의 속성은 알고 있다는 전제가 있어야합니다.

이 속성과 UI 요소의 속성이 바인딩 되어야하지요.

이때 Data객체를 Binding 원본이가로 부르고,

UI 요소를 Binding 대상이라고 부릅니다.

UI의 타겟이 되는 속성은 일반 속성이 아닌, 의존 속성입니다.

일반 속성은 바인딩 타겟으로 사용될 수 없습니다.

대부분의 UI 요소들은 

의존 속성을 무수히 많이 가지고 있다는 사실을 알 수 있겠군요.

사실, Width, Height와 같은 속성들도 모두 의존 속성입니다.

대상이 되려면 UI 요소이어야 하고,

UI 요소의 속성이 의존 속성이어야 되는데 

Data객체에서는 제약이 없습니다.

의존 속성이 아니라도 그냥 속성만 있으면 바인딩이 가능하다 이겁니다.

즉, 속성을 가지고 있는 객체라면 누구든 올 수있다 이겁니다.

그래서 바인딩을 하게 되면,

데이터가 변경됬을 시 자동으로 UI가 업데이트 되도록,

UI가 업데이트 되면 데이터가 자동으로 변경 되도록 할 수 있게 됩니다.

따라서, Sync 뿐 아니라, 형식 변환도 되어야하는 것이지요.

우선, UI 요소 부분부터 공부해보도록 하겠습니다.

UI는 모두 아시듯이, XAML에서 담당합니다.

물론, 코드로도 작성될 수 있습니다.

하지만, XAML로 작성하는 것이 더 편할 뿐이지요.

아무튼... 위의 코드를 보시면 아시겠지만,

Textbox를 바인딩 하고자 UI의 속성과 

그 속성에 값이 아닌 '{ ~ }' 와 같은 문법을 집어넣습니다.

즉, Mark Up 확장 바인딩 문법을 통해 설정을 해줍니다.

값이 아닌, 자식 요소로써 표현하기 위해 만들어낸 문법으로써,

MarkUp을 확장해서 사용하는 문법입니다.

아무튼... 해당 예제의 의미는

UI 요소에는 두가지의 Text가 있고,

Data원본에는 누군지도 모르는 

Data 객체의 Name이라는 속성과, Nick이라는 속성을 바인딩하겠다고 지정한 것이지요.

어떤 객체인지 설명을 해줘야하는데,

즉, 바인딩은 설정했지만, 어떤 객체와 바인딩할지를 명시하지 않았다 이겁니다.

바인딩 문법에는 어떤 객체라는 것이 없습니다.

바인딩 되는 객체를 바인딩 원본이라고 부르는데,

바인딩 타켓은 해당 예제에서 TextBox가 되는 것입니다.

그런데, 바인딩 원본은 모르기 때문에 설정이 필요하다는 것이지요.

이 설정을 하는 방법도 여러가지의 방법이 있습니다.

 

이처럼 소스코드에서 

가장 바인딩 원본을 선택하는 방법이 있습니다.

객체와 연결된 UI 영역인 XAML을 보시면 아시겠지만,

DataContext는 DocPanel 것입니다.

그런데, 해당 DataContext는 바인딩 타겟의 부모 패널입니다.

그런데, 이상한건 어느 부모의 위치에 둬도 정확하게 바인딩이 됩니다.

즉, 바인딩 원본은 부모를 올라가며 찾는다는 의미입니다.

자식 요소라는 것은 

데이터 하나를 기준으로 공용으로 사용될 것인데,

일일히 바인딩 할 필요없이 

부모의 패널에 위치시키면 불편함을 덜 수 있겠군요.

이처럼 DataContext는 

바인딩 원본을 부모 요소 트리로 올라가며 검색하며,

공용적인 원본을 선택하기 위한 방법입니다.

굉장히 유연한 문법입니다.

같은 원본을 사용시에 일일히 원본 선택 필요 없이 

DataContext를 지정하면 되기 때문입니다.

지금까지 Binding이 무엇인지 바인딩 타겟과 원본에 대해서 알아봤습니다.

다음시간에 뵙겠습니다.

이상 삽잡이였습니다!