유니티 UI 데이터 바인딩 MVVM

 

해당 글에서 사용한 라이브러리는 아래의 링크에서 확인할 수 있습니다.

https://github.com/Real-Serious-Games/Unity-Weld

GitHub - Real-Serious-Games/Unity-Weld: MVVM-style data-binding system for Unity.

 

Bringing MVVM to Unity - Part 2: Property and event bindings

Bringing MVVM to Unity - Part 2: Property and event bindings

 

시작 전 정리하자면

View : 뷰는 UI 요소입니다. 버튼이나 글자 띄우는 UI같은걸 말합니다.

View Model : 뷰 모델은 뷰와 모델간 중개자 역할을 합니다. 뷰의 상태와 행동을 관리하고, 뷰와 모델 사이의 데이터 바인딩을 처리합니다. 

---

#1 데이터 바인딩이란?

• 데이터 바인딩: UI 요소와 데이터 소스를 연결하여 데이터가 변경될 때 UI가 자동으로 업데이트되도록 하는 과정.

예를 들어, ListView와 데이터 컬렉션을 바인딩하면 데이터 변경 시 UI가 자동으로 갱신됩니다.

• 변수 바인딩: 프로그래밍에서 변수를 선언하고 초기화하거나, 변수를 특정 값이나 객체에 연결하는 과정. ← 우리가 알고 있는 값 할당 느낌
• 이벤트 바인딩: 특정 이벤트가 발생할 때 실행될 함수를 지정하는 과정. 예를 들어, 버튼 클릭 이벤트와 클릭 핸들러를 연결하는 것.

MVVM 왜 쓰는가 → UI 데이터 바인딩 하기 위해서

 

---

#2 One way property binding 단방향 프로퍼티 바인딩

예시 상황

MyViewModel1이라는 뷰 모델이 Text라는 프로퍼티를 가지고 있습니다.

이 Text는 Canvas에 있는 Text 컴포넌트에 있는 One Way Property Binding 컴포넌트로 바인딩되어 데이터가 갱신됩니다.

 

OneWayPropertyBinding = 단방향 프로퍼티 바인딩

→ text프로퍼티 변수(뷰 모델)를 바인딩해서 Text UI 뷰에 갱신시킴

 

사용 용도 : Text UI같이 UI 건드려서 변수가 수정 안되는 것들은 변수에 영향이 안가니까 단방향으로 설계하여 MyViewModel1이 프로퍼티(뷰 모델)를 수정하면 뷰로 전파되어 갱신됩니다.

이 바인딩으로 바인딩될 대상 뷰 모델은 INotifyPropertyChanged  인터페이스를 상속해야합니다.

이 인터페이스는 프로퍼티가 변할 때마다 이벤트 호출해서 뷰 모델과 뷰 간의 속성 동기화를 용이하게 합니다.

비슷한 매커니즘으로 WPF가 있습니다

 

[Binding] 이라는 속성을 변수 위에 선언해주면 해당 변수(프로퍼티)는 바인딩될 대상으로 바뀝니다.

대상 변수들은 set될 때 아래 예시처럼 OnPropertyChanged() 메서드 호출해서 갱신해줘야합니다.

[Binding]
public string Text
{
    get
    {
        return text;
    }
    set
    {
        if (text == value)
        {
            return; // No change.
        }

        text = value;

        OnPropertyChanged("Text");
    }
} 

---

#3 Two way property binding 양방향 프로퍼티 바인딩

예시상황

MyViewModel2라는 뷰모델이 Text라는 프로퍼티를 가지고 있습니다.

이 Text는 UI인 InputField에서 Two Way Property Binding 컴포넌트로 바인딩하고 있습니다.

따라서 InputField 수정사항이 Text로 푸시되고 Text에서도 InputField로 푸시됩니다.

 

---

#4 Event binding 이벤트 바인딩

예시상황

클래스 MyViewModel3에서 RotateCube()라는 함수 메서드를 가지고 있고 이를 버튼 UI라는 뷰가 바인딩하여 버튼 클릭시 바인딩한 이벤트를 실행합니다.

여긴 단방향 혹은 양방향 바인딩과는 다르게 INotifyPropertyChanged  인터페이스 상속 안했습니다. 이유는 이벤트만 바인딩할 예정이기에 프로퍼티가 변경되는걸 알 필요 없기 때문입니다.

 

---

#5 지금까지 배운걸 합치기

눈여겨볼만한건 Text가 양방향으로 InputField를 통해 수정되고 단방향으로 Text UI 뷰에 갱신되는 과정입니다.

이런식으로 서로 복합적으로 사용해서 바인딩을 활용하시면 될 것 같습니다.