WPF 바인딩 쉽게 이해하기: 텍스트 박스와 버튼 예제

WPF 바인딩 쉽게 이해하기: 텍스트 박스와 버튼 예제

안녕하세요, 여러분! 오늘은 WPF(Windows Presentation Foundation)에서 중요한 개념인 바인딩(Binding)에 대해 알아보려고 합니다. WPF를 처음 접한다면 "바인딩이 뭐지?" 하실 수도 있는데요, 쉽게 말해 UI와 데이터를 연결해주는 마법 같은 기능이에요. 이번 포스팅에서는 텍스트 박스와 버튼을 활용한 간단한 예제를 통해 바인딩의 기본을 배워보겠습니다. 따라하면서 직접 해보시면 더 이해가 쏙쏙 될 거예요!

완성 모습 미리보기

먼저 우리가 만들어볼 결과물을 간단히 설명할게요:

• 사용자가 텍스트 박스에 이름을 입력하면, 다른 텍스트 박스에 실시간으로 똑같이 표시돼요.
• 버튼을 누르면 입력한 이름이 메시지 박스로 나타납니다.

어때요, 간단하지만 바인딩의 핵심을 느낄 수 있죠? 그럼 이제 코드를 하나씩 살펴볼게요!

1. XAML 코드 작성하기

WPF에서는 UI를 XAML이라는 언어로 만드는데요, 먼저 MainWindow.xaml 파일에 아래 코드를 넣어주세요.

<Window x:Class="WpfBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF 바인딩 예제" Height="200" Width="300">
    <Grid Margin="10">
        <StackPanel>
            <TextBlock Text="이름 입력:" Margin="0,0,0,5"/>
            <TextBox x:Name="InputTextBox" Width="200" Margin="0,0,0,10" Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}"/>
            <Button Content="확인" Width="100" Click="Button_Click" Margin="0,0,0,10"/>
            <TextBlock Text="입력된 이름:" Margin="0,0,0,5"/>
            <TextBox x:Name="OutputTextBox" Width="200" Text="{Binding UserName}" IsReadOnly="True"/>
        </StackPanel>
    </Grid>
</Window>

코드 설명

• <Window>: WPF 창을 정의해요. 제목은 "WPF 바인딩 예제"로 설정했어요.
• <Grid>와 <StackPanel>: UI를 깔끔하게 배치하기 위한 레이아웃이에요. StackPanel은 요소를 세로로 쌓아줍니다.
• <TextBlock>: "이름 입력:"과 "입력된 이름:"이라는 안내 텍스트를 표시해요.
• <TextBox>:
  • 첫 번째 (InputTextBox): 사용자가 이름을 입력하는 곳이에요. Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}"라는 속성이 바인딩의 핵심인데, 입력할 때마다 데이터가 실시간으로 업데이트돼요.
  • 두 번째 (OutputTextBox): 입력된 이름을 보여주는 곳이에요. IsReadOnly="True"로 설정해서 수정은 못 하게 했어요.
• <Button>: "확인" 버튼이에요. 클릭하면 이벤트가 발생해요.

2. C# 코드 작성하기

이제 로직을 담당할 C# 코드를 MainWindow.xaml.cs에 넣어주세요.

using System.ComponentModel;
using System.Windows;

namespace WpfBindingExample
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _userName;

        public string UserName
        {
            get { return _userName; }
            set
            {
                _userName = value;
                OnPropertyChanged(nameof(UserName));
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this; // 이 창을 데이터 소스로 설정
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show($"입력된 이름: {UserName}");
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

코드 설명

• INotifyPropertyChanged: 속성 값이 바뀌었을 때 UI에 알려주는 인터페이스예요. 바인딩의 필수 요소죠!
• UserName 속성:
  • private string _userName: 실제 데이터를 저장하는 변수예요.
  • public string UserName: 외부에서 접근할 수 있는 속성인데, 값이 바뀌면 OnPropertyChanged를 호출해서 UI를 갱신해요.
• DataContext = this: 이 창 자체를 데이터 소스로 설정하는 코드예요. XAML의 {Binding UserName}이 여기 UserName 속성을 참조하게 됩니다.
• Button_Click: 버튼을 누르면 UserName 값을 메시지 박스로 보여줘요.

3. 바인딩의 마법 이해하기

이제 이 코드가 어떻게 작동하는지 단계별로 볼게요:

1. 입력: InputTextBox에 "홍길동"을 입력하면, UpdateSourceTrigger=PropertyChanged 덕분에 입력 중에 바로 UserName 속성이 업데이트돼요.
2. 알림: UserName 값이 바뀌면 OnPropertyChanged가 호출되면서 바인딩된 UI(OutputTextBox)에 변경 사항이 반영돼요.
3. 출력: OutputTextBox에 "홍길동"이 실시간으로 나타나고, 버튼을 누르면 메시지 박스로도 확인할 수 있어요.

이게 바로 바인딩의 힘이에요! 코드로 값을 일일이 옮기지 않아도 UI와 데이터가 자동으로 싱크를 맞춘답니다.

4. 실행해보기

1. Visual Studio에서 새 WPF 프로젝트를 만드세요.
2. MainWindow.xaml과 MainWindow.xaml.cs에 위 코드를 붙여넣으세요.
3. 빌드하고 실행하면 창이 뜨고, 텍스트를 입력하며 결과를 확인할 수 있어요!

실행 결과

• "이름 입력"에 "홍길동"을 입력하면 "입력된 이름"에 바로 표시돼요.
• "확인" 버튼을 누르면 "입력된 이름: 홍길동"이라는 메시지가 나타납니다.

5. 왜 바인딩이 좋을까?

• 편리함: UI와 데이터를 수동으로 연결할 필요가 없어요.
• 확장성: 나중에 더 복잡한 데이터(예: 리스트나 객체)도 쉽게 연결할 수 있어요.
• MVVM: WPF에서 많이 쓰이는 MVVM 패턴의 기본이 바로 이 바인딩이에요.

마무리

WPF 바인딩의 세계에 첫발을 내디뎠어요! 이 예제는 정말 기본적인 거지만, 여기서부터 시작해서 더 멋진 UI를 만들어보세요. 질문이 있으면 언제든 댓글로 남겨주시고, 다음 포스팅에서 더 재미있는 WPF 이야기를 가져올게요. 그럼 즐거운 코딩 되세요! 😊