맨위로가기

데이터 바인딩

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

데이터 바인딩은 UI 요소와 데이터를 연결하여 한쪽의 변경 사항이 다른 쪽에 자동으로 반영되도록 하는 기술이다. 이 기술은 UI 조작과 데이터 처리 로직의 결합으로 인한 유지보수 어려움을 해결하며, 코드 단순화, 유지보수 용이성, 선언적 프로그래밍 등의 장점을 제공한다. 데이터 바인딩은 단방향 및 양방향 방식으로 구현될 수 있으며, 다양한 프레임워크와 도구에서 지원된다. 주요 프레임워크로는 .NET, Java, JavaScript, C++, 델파이 등이 있으며, Angular, React, Vue.js와 같은 프론트엔드 프레임워크에서도 널리 사용된다.

2. 데이터 바인딩의 개념

데이터 바인딩은 사용자 인터페이스(UI) 요소와 데이터를 연결하여, 한쪽이 변경되면 다른 쪽도 자동으로 바뀌도록 하는 기술이다. 예를 들어, 직원 정보 관리 프로그램에서 이름, 생년월일 등을 입력하는 화면을 생각해보자. 기존에는 '확인' 버튼을 누르면 화면의 값을 데이터베이스에 저장하는 코드를 직접 작성해야 했다.

하지만 데이터 바인딩을 이용하면 이 과정이 자동화된다. UI와 데이터를 연결해두면, 한쪽이 바뀌면 다른 쪽도 자동으로 업데이트된다. 텍스트 상자의 직원 이름이 변경되면, 연결된 데이터베이스의 정보도 함께 수정되는 것이다.

데이터 바인딩은 배열, 리스트 등의 데이터 구조(컬렉션)를 리스트 뷰나 그리드에 표시하고 다루는 것도 쉽게 해준다. 주로 SQL 데이터베이스나 XML 등의 데이터 소스와 애플리케이션, 웹 페이지(웹 애플리케이션)의 사용자 인터페이스를 연결할 때 쓰이며,[5] 반응형 프로그래밍의 기반 기술이기도 하다.[6][7]

Microsoft Windows와 .NET Framework/.NET Core 환경에서는 XAML을 사용하는 UI 프레임워크가 데이터 바인딩을 기본 지원한다. XAML에서는 UI 요소(타겟) 속성에 연결할 데이터(소스) 속성을 지정하여 바인딩을 설정한다.

2. 1. 단방향 바인딩

React는 훅(hook)이라는 기능을 통해 단방향 바인딩을 구현한다.

React 전용 함수 hook(useX)으로 데이터 변수를 정의하고, UI를 선언할 때 데이터 변수를 사용함으로써 바인딩을 수행한다. 그 후, hook에서 반환된 갱신 함수(관례적으로 setX라고 명명됨)에 새로운 데이터를 전달함으로써 UI 갱신이 암묵적으로 스케줄링된다. hook은 함수이기 때문에 일반적으로 상태 유지는 수행할 수 없지만, hook은 React의 내부 리스트에 접근함으로써 상태를 유지한다[10][11]。

2. 2. 양방향 바인딩

데이터 바인딩은 변경 반영 방향에 따라 다음과 같은 두 종류가 있다[8][9]。

  • 단방향 바인딩: '소스 ⇒ 타겟' 또는 '타겟 ⇒ 소스'의 일방향으로 암묵적으로 반영된다.
  • 양방향 바인딩: 소스 ⇔ 타겟 간의 양방향으로 암묵적으로 반영된다.

3. 데이터 바인딩의 장점

데이터 바인딩은 UI 요소 조작이나 데이터 갱신을 명시적으로 처리하지 않고도, 애플리케이션 프레임워크를 통해 변경 사항을 자동으로 반영한다. 즉, 한쪽의 변경이 다른 쪽에 자동으로 반영되므로, 배열이나 리스트와 같은 데이터 구조(컬렉션)를 리스트 뷰나 그리드에 표시하고 조작하는 것이 간편해진다.[5] 데이터 바인딩 기반 프로그래밍 스타일을 반응형 프로그래밍이라고도 한다.[6][7]

3. 1. 코드 단순화

GUI 애플리케이션은 텍스트 상자, 체크 상자, 버튼 등으로 사용자 입력을 받고 데이터를 표시하고 조작하는 경우가 많다. 직원 관리 소프트웨어를 예로 들면, 직원의 이름, 생년월일, 주소 등을 입력받아 데이터베이스에 저장한다. 일반적인 구현에서는 확정 버튼이 눌렸을 때 이벤트를 처리하는 핸들러(콜백 함수)를 작성하여 UI 요소의 값을 가져와 데이터베이스에 반영한다. 또한, 리스트에서 직원을 선택하여 정보를 변경하는 경우, 데이터베이스에서 해당 직원의 정보를 읽어와 UI 요소에 설정해야 한다. 이러한 방식은 번거롭고, 데이터 처리 로직과 UI 조작이 강하게 결합되어 유지보수가 어렵다.

데이터 바인딩은 UI 요소 조작이나 데이터 갱신을 명시적으로 처리하는 대신, 애플리케이션 프레임워크를 통해 변경 사항을 자동으로 반영한다. 즉, 한쪽의 변경이 다른 쪽에 자동으로 반영되므로, 배열이나 리스트와 같은 데이터 구조(컬렉션)를 리스트 뷰나 그리드에 표시하고 조작하는 것이 간편해진다. 데이터 바인딩은 SQL 데이터베이스나 XML 등의 데이터 소스와 애플리케이션 또는 웹 페이지(웹 애플리케이션)의 사용자 인터페이스를 연결할 때 주로 사용된다.[5] 데이터 바인딩 기반 프로그래밍 스타일을 반응형 프로그래밍이라고도 한다.[6][7]

Microsoft Windows 및 .NET Framework/.NET Core 환경에서는 XAML을 사용하는 UI 프레임워크가 데이터 바인딩을 기본 지원한다. XAML UI 요소의 속성에 바인딩할 데이터 속성의 경로 정보를 기술하여 데이터 바인딩을 설정한다.

3. 2. 유지보수 용이성

데이터 바인딩은 UI 요소 조작이나 데이터 갱신을 명시적으로 하지 않고도, 한쪽의 변경 사항이 다른 쪽에 자동으로 반영되도록 한다. 이는 애플리케이션 프레임워크를 통해 추상화되어 처리된다. 이러한 방식은 데이터 처리 로직과 UI 조작이 밀접하게 결합되어 프로그램 유지보수성이 저하되는 기존 방식의 문제점을 해결한다.[5] 데이터 바인딩을 기반으로 하는 프로그래밍 스타일을 반응형 프로그래밍이라고 한다.[6][7]

3. 3. 선언적 프로그래밍

데이터 바인딩은 UI 요소 조작이나 데이터 갱신을 명시적으로 처리하지 않고도, 한쪽의 변경 사항이 다른 쪽에 자동으로 반영되도록 한다. 이를 통해 UI와 데이터 간의 관계를 선언적으로 정의하여 프로그램의 가독성과 유지보수성을 높인다. 예를 들어, 직원 정보 관리 소프트웨어에서 직원의 이름, 생년월일 등을 변경하면 데이터베이스에 자동으로 반영되며, 데이터베이스의 변경 사항도 UI에 자동으로 반영된다.

데이터 바인딩은 배열이나 리스트와 같은 데이터 구조(컬렉션)를 리스트 뷰나 그리드에 표시하고 조작하는 것을 간소화한다. 데이터 바인딩은 SQL 데이터베이스나 XML 등의 데이터 소스와 애플리케이션 또는 웹 페이지(웹 애플리케이션)의 사용자 인터페이스를 연결할 때 자주 사용된다[5]。 이러한 데이터 바인딩 기반 프로그래밍 스타일을 반응형 프로그래밍이라고 한다[6][7]。

Microsoft Windows 및 .NET Framework/.NET Core 환경에서는, UI 기술에 XAML을 사용하는 XAML 패밀리 UI 프레임워크가 데이터 바인딩을 표준으로 지원한다. XAML에서 UI 요소(타겟) 속성에 바인딩할 데이터(소스) 속성의 경로 정보를 기술하면 데이터 바인딩이 이루어진다.

4. 주요 데이터 바인딩 프레임워크 및 도구

데이터 바인딩은 다양한 프로그래밍 환경에서 활용되며, 사용자 인터페이스(UI)와 데이터 소스를 연결하는 효율적인 방법을 제공한다. 데이터 바인딩을 통해 개발자는 UI 요소 조작이나 데이터 갱신 코드를 직접 작성하는 대신, 프레임워크가 자동으로 양방향 동기화를 처리하도록 할 수 있다.

다음은 주요 프로그래밍 언어 및 플랫폼별 데이터 바인딩 프레임워크 및 도구 목록이다.


  • Adobe Flex
  • 안드로이드 - AndroidX 데이터 바인딩 라이브러리[12]
  • C/C++
  • * [http://www.codalogic.com/lmx/ Codalogic LMX]
  • * [http://www.codesynthesis.com/products/xsd/ CodeSynthesis XSD]
  • * [http://www.obj-sys.com/xbinder.shtml XBinder]
  • * [http://xmlbeansxx.touk.pl/ Xmlbeansxx]
  • Cocoa 바인딩 (macOS)
  • Dynamic HTML (Internet Explorer)
  • .NET
  • * ADO.NET (LINQ to SQL)[13]
  • * ASP.NET
  • * [http://spring-net.jp/ Spring.NET]
  • iBATIS (iBATIS 데이터 매퍼 프레임워크)
  • 유니버설 윈도우 플랫폼 (UWP) 앱 - Windows 런타임, XAML 기반
  • [http://www.liquid-technologies.com/ Liquid XML]

4. 1. C# / .NET

Microsoft Windows 및 .NET Framework/.NET Core 환경에서는, XML의 독자적인 확장인 XAML을 UI 기술에 이용하는 XAML 패밀리의 UI 프레임워크가 데이터 바인딩을 표준적으로 지원한다. XAML상의 UI 요소(타겟)의 속성에, 바인딩하고 싶은 데이터(소스)의 속성에 관한 경로 정보를 기술함으로써 데이터 바인딩이 이루어진다.[5]

4. 2. 델파이

델파이에서는 다음과 같은 데이터 바인딩 기술을 사용할 수 있다.

  • DSharp: 서드 파티 데이터 바인딩 도구이다.
  • OpenWire: 서드 파티 비주얼 데이터 바인딩 도구이다.
  • 라이브 바인딩: 델파이에 내장된 데이터 바인딩 기능이다.

4. 3. 자바

구글 웹 툴킷, JavaFX, 이클립스는 자바 기반의 데이터 바인딩을 지원한다.

  • JavaFX는 [https://docs.oracle.com/javafx/2/binding/jfxpub-binding.htm Properties and Binding] 기능을 제공한다.
  • 이클립스는 [https://wiki.eclipse.org/JFace_Data_Binding JFace Data Binding] 및 [https://wiki.eclipse.org/JFace_Data_Binding/EMF EMF Data Binding]을 지원한다.


다음은 기타 자바 기반 데이터 바인딩 프레임워크 및 라이브러리이다.

  • Apache Struts
  • Apache XMLBeans
  • [http://www.castor.org/ Castor]
  • [http://sourceforge.net/projects/cookxml/ CookXml]
  • 이클립스 모델링 프레임워크 ([http://www.eclipse.org/modeling/emf/ EMF])
  • Hibernate
  • JAXB (Java Architecture for XML Binding)
  • [http://sourceforge.net/projects/jibx/ JiBX]
  • [http://otn.oracle.co.jp/products/adf/ Oracle ADF] (Application Development Framework)
  • [http://www.springframework.org/ Spring Framework]

4. 4. 자바스크립트

자바스크립트 환경에서 데이터 바인딩은 웹 개발의 효율성을 높이는 데 중요한 역할을 한다. 특히, 애플리케이션 프레임워크를 활용하면 데이터와 사용자 인터페이스(UI) 간의 상호 작용을 간소화할 수 있다.

다음은 주요 자바스크립트 프레임워크 및 라이브러리 목록이다.

AngularJS, 리액트, Vue.js 등은 널리 사용되는 웹 프레임워크들이다.

4. 4. 1. Angular

AngularJS는 양방향 데이터 바인딩을 지원한다.[17]

4. 4. 2. React

리액트는 훅(hook)이라는 기능을 통해 단방향 데이터 바인딩을 구현한다.

리액트 전용 함수 훅(useX)으로 데이터 변수를 정의하고, UI를 선언할 때 데이터 변수를 사용함으로써 바인딩을 수행한다. 그 후, 훅에서 반환된 갱신 함수(관례적으로 setX라고 명명됨)에 새로운 데이터를 전달함으로써 UI 갱신이 암묵적으로 스케줄링된다. 훅은 함수이기 때문에 일반적으로 상태 유지는 수행할 수 없지만, 훅은 리액트의 내부 리스트에 접근함으로써 상태를 유지한다.[10][11]

4. 4. 3. Vue.js

Vue.js는 양방향 데이터 바인딩과 함께 유연한 데이터 처리 방식을 제공한다.[17]

4. 5. 오브젝티브-C

AKABeacon은 iOS 데이터 바인딩 프레임워크이다.

4. 6. 스위프트

SwiftUI는 스위프트 프로그래밍 언어를 사용하여 모든 애플 플랫폼에서 사용자 인터페이스를 구축하기 위한 혁신적이고 간편한 방법을 제공하는 사용자 인터페이스 도구이다. 하나의 도구와 API 세트를 사용하여 모든 애플 기기에서 작동하는 사용자 인터페이스를 구축할 수 있다. 선언적 구문(declarative syntax)을 가진 SwiftUI는 읽고 쓰기가 매우 쉬우며, 작성한 코드는 디자인 도구에서 실시간 미리보기로 확인할 수 있다. 또한, 동적 유형, 다크 모드, 현지화 등을 자동으로 지원한다.

4. 7. 스칼라

Binding.scala는[18] 스칼라를 위한 반응형 데이터 바인딩 프레임워크이다.

참조

[1] 웹사이트 What is Data Binding? https://www.techoped[...] 2015-12-30
[2] 웹사이트 Data Binding Overview https://msdn.microso[...] Microsoft 2016-12-29
[3] 웹사이트 データ バインディングの概要 - WPF .NET Framework https://docs.microso[...] 2020-12-03
[4] 웹사이트 Xamarin.Forms のデータ バインディング - Xamarin https://docs.microso[...] 2020-05-21
[5] 문서 データバインディングは、Custom Element(''ホストエレメント'')のデータとそのローカルDOM(子エレメントまたはターゲットエレメント'')のプロパティまたは属性にコネクトします。 https://docs.polymer[...] Polymer Japan
[6] 문서 リアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。 https://jp.vuejs.org[...] Vue.js
[7] 문서 reactive UIs using the React framework https://www.apollogr[...] Apollo
[8] 문서 方法: バインディングの方向を指定する - WPF .NET Framework | Microsoft Docs https://docs.microso[...]
[9] 문서 Xamarin.Forms のバインディング モード - Xamarin | Microsoft Docs https://docs.microso[...]
[10] 문서 通常、関数が終了すると変数は『消えて』しまいますが、state 変数は React によって保持されます。 https://ja.reactjs.o[...] React
[11] 문서 それぞれのコンポーネントに関連付けられる形で、React 内に「メモリーセル」のリストが存在しています。... useState() のようなフックを呼ぶと、フックは現在のセルの値を読み出し（あるいは初回レンダー時はセル内容を初期化し）、ポインタを次に進めます https://ja.reactjs.o[...] React
[12] 문서 データ バインディング ライブラリ | Android デベロッパー | Android Developers https://developer.an[...]
[13] 문서 データ バインディング - ADO.NET | Microsoft Docs https://docs.microso[...]
[14] 문서 データ バインディング - Windows Forms .NET Framework | Microsoft Docs https://docs.microso[...]
[15] 웹인용 What is Data Binding? https://www.techoped[...] 2015-12-30
[16] 웹인용 Data Binding Overview https://msdn.microso[...] Microsoft 2016-12-29
[17] 웹인용 Datum.js http://datumjs.com 2016-11-07
[18] 웹인용 Binding.scala https://github.com/T[...] 2016-12-30


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com