\ucd5c\uadfc C# WPF(Windows Presentation Foundation) \uac1c\ubc1c\uc5d0\uc11c MVVM(Model-View-ViewModel) \ud328\ud134\uc740 UI\uc640 \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud560 \uc218 \uc788\ub294 \uac15\ub825\ud55c \ubc29\ubc95\uc73c\ub85c \uc790\ub9ac\uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. .NET 6\uc640 .NET 7\uc758 \ub3c4\uc785\uc73c\ub85c WPF \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub354\uc6b1 \uac1c\uc120\ub41c \uc131\ub2a5\uacfc \ub2e4\uc591\ud55c \ucd5c\uc2e0 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 MVVM \ud328\ud134\uc744 \uc911\uc2ec\uc73c\ub85c \ucd5c\uc2e0 WPF \uae30\ub2a5\uc744 \ud1b5\ud569\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
1. MVVM \ud328\ud134\uc758 \uc774\ud574<\/h2>\n
MVVM \ud328\ud134\uc740 \uc138 \uac00\uc9c0 \uc8fc\uc694 \uad6c\uc131 \uc694\uc18c\ub85c \ub098\ub258\uc5b4 \uc788\uc2b5\ub2c8\ub2e4: Model, View, ViewModel. \uac01 \uad6c\uc131 \uc694\uc18c\uc758 \uc5ed\ud560\uc744 \uc774\ud574\ud558\ub294 \uac83\uc740 WPF \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc124\uacc4\ud558\ub294 \ub370 \uc911\uc694\ud55c \ub2e8\uacc4\uc785\ub2c8\ub2e4.<\/p>\n
- \n
- Model:<\/strong> \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub370\uc774\ud130 \ubc0f \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 \ub098\ud0c0\ub0c5\ub2c8\ub2e4. \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \uc0c1\ud638 \uc791\uc6a9\ud558\uac70\ub098 \ube44\uc988\ub2c8\uc2a4 \uaddc\uce59\uc744 \ucc98\ub9ac\ud558\ub294 \ud074\ub798\uc2a4\uac00 \ud3ec\ud568\ub429\ub2c8\ub2e4.<\/li>\n
- View:<\/strong> UI \uc694\uc18c\ub85c, \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \uc81c\uacf5\ud558\uace0 \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc744 \uc218\uc9d1\ud569\ub2c8\ub2e4.<\/li>\n
- ViewModel:<\/strong> Model\uacfc View \uc0ac\uc774\uc758 \uc911\uac1c\uc790\ub85c, \ub370\uc774\ud130\ub97c \ubc14\uc778\ub529\ud558\uace0 \uba85\ub839\uc744 \ucc98\ub9ac\ud558\uc5ec UI \uc5c5\ub370\uc774\ud2b8\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
2. .NET 6\/7\uc758 \uc8fc\uc694 WPF \uae30\ub2a5<\/h2>\n
.NET 6\/7\uc758 \ucd9c\uc2dc\ub85c WPF\ub294 \ub9ce\uc740 \ubcc0\ud654\uac00 \uc788\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uadf8\uc911 \uba87 \uac00\uc9c0 \uc8fc\uc694 \uae30\ub2a5\uc785\ub2c8\ub2e4:<\/p>\n
- \n
- \uae30\ubcf8 UI \uc131\ub2a5 \ud5a5\uc0c1:<\/strong> .NET 6\uc640 7\uc5d0\uc11c\ub294 \ub80c\ub354\ub9c1 \uc131\ub2a5\uc774 \uac1c\uc120\ub418\uc5b4 \ubd80\ub4dc\ub7ec\uc6b4 UI \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/li>\n
- \uc608\uc678 \ucc98\ub9ac \uac1c\uc120:<\/strong> \uc608\uc678 \ucc98\ub9ac \ubc0f \ub514\ubc84\uae45 \ub3c4\uad6c\uac00 \uac15\ud654\ub418\uc5b4 \uac1c\ubc1c\uc790\uac00 \ubb38\uc81c\ub97c \ub354\uc6b1 \uc27d\uac8c \ucd94\uc801\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n
- \uc2a4\ud0c0\uc77c \ubc0f \ud15c\ud50c\ub9bf \uac1c\uc120:<\/strong> \ub354 \ub9ce\uc740 \uc2a4\ud0c0\uc77c \ubc0f \ud15c\ud50c\ub9bf \uc635\uc158\uc744 \uc81c\uacf5\ud558\uc5ec UI\uc758 \uc77c\uad00\uc131\uc744 \ub192\uc774\uace0 \ub9de\ucda4\uc124\uc815\uc744 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n
- Hot Reload:<\/strong> \ucf54\ub4dc \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc989\uc2dc UI\uc5d0 \ubc18\uc601\ud560 \uc218 \uc788\uc5b4 \uac1c\ubc1c \ud6a8\uc728\uc131\uc744 \ud06c\uac8c \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n
- \uc811\uadfc\uc131 \uc9c0\uc6d0 \uac15\ud654:<\/strong> \ub2e4\uc591\ud55c \uc811\uadfc\uc131 \ud5a5\uc0c1\uc744 \ud1b5\ud574 \ubaa8\ub4e0 \uc0ac\uc6a9\uc790\uac00 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc27d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/li>\n<\/ul>\n
3. \ucd5c\uc2e0 WPF \uae30\ub2a5\uc744 MVVM\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95<\/h2>\n
\uc774\uc81c \ucd5c\uc2e0 WPF \uae30\ub2a5\uc744 MVVM\uacfc \ud1b5\ud569\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. \uc608\uc81c\ub97c \uc0b4\ud3b4\ubcf4\uba74\uc11c \uc2e4\uc2b5\uc801\uc73c\ub85c \uc774\ud574\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
3.1. Hot Reload \uae30\ub2a5\uc744 \ud65c\uc6a9\ud55c \uac1c\ubc1c<\/h3>\n
Hot Reload \uae30\ub2a5\uc740 \ucf54\ub4dc\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9c8\ub2e4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc7ac\uc2dc\uc791\ud558\uc9c0 \uc54a\uace0\ub3c4 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc989\uc2dc \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae30\ub2a5\uc744 MVVM \uad6c\uc870\uc5d0 \ud1b5\ud569\ud558\uc5ec ViewModel\uc744 \ube60\ub974\uac8c \uc218\uc815\ud558\uace0 \uacb0\uacfc\ub97c \uc989\uc2dc \ubc18\uc601\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc608\ub97c \ub4e4\uc5b4, ViewModel\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc18d\uc131\uc744 \uc815\uc758\ud588\ub2e4\uace0 \uac00\uc815\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4:<\/p>\n
public class MainViewModel : INotifyPropertyChanged\n{\n private string _message;\n public string Message\n {\n get { return _message; }\n set \n {\n _message = value;\n OnPropertyChanged(nameof(Message));\n }\n }\n}\n<\/code><\/pre>\nView\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 Data Binding\uc744 \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n
<TextBlock Text=\"{Binding Message}\" \/><\/code><\/pre>\n\uc774\uc81c Hot Reload\ub97c \uc0ac\uc6a9\ud558\uc5ec ViewModel\uc758
Message<\/code> \uc18d\uc131\uc744 \uc790\uc720\ub86d\uac8c \uc218\uc815\ud558\uace0, \uc989\uc2dc UI\uc5d0\uc11c \ubcc0\uacbd \uc0ac\ud56d\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n3.2. \uac1c\uccb4 \ubaa8\ub378\ub9c1\uc5d0\uc11c \ub354 \ub098\uc740 Barnding<\/h3>\n
WPF\uc758 Binding\uc740 \ub370\uc774\ud130 \uc804\uc1a1\uc744 \uac04\ud3b8\ud558\uac8c \ucc98\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \uc911\uc694\ud55c \uae30\ub2a5\uc785\ub2c8\ub2e4. \ucd5c\uc2e0 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uc5ec \ub354 \ub098\uc740 \ub370\uc774\ud130\ub97c \ubaa8\ub378\ub9c1\ud558\uace0 \ubc14\uc778\ub529\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
public class Person : INotifyPropertyChanged\n{\n private string _name;\n private int _age;\n\n public string Name\n {\n get { return _name; }\n set \n {\n _name = value;\n OnPropertyChanged(nameof(Name));\n }\n }\n\n public int Age\n {\n get { return _age; }\n set \n {\n _age = value;\n OnPropertyChanged(nameof(Age));\n }\n }\n}\n<\/code><\/pre>\nViewModel\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 ListCollectionView\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130 \uceec\ub809\uc158\uc744 \ub354 \ud6a8\uacfc\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
public class MainViewModel\n{\n public ICollectionView People { get; set; }\n\n public MainViewModel()\n {\n var peopleList = new List\n {\n new Person { Name = \"Alice\", Age = 30 },\n new Person { Name = \"Bob\", Age = 25 }\n };\n\n People = new ListCollectionView(peopleList);\n }\n}\n<\/person><\/code><\/pre>\n View\uc5d0\uc11c\ub294
ItemsControl<\/code>\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130 \ubc14\uc778\ub529\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n<ItemsControl ItemsSource=\"{Binding People}\">\n <ItemsControl.ItemTemplate>\n <DataTemplate>\n <StackPanel>\n <TextBlock Text=\"{Binding Name}\" \/>\n <TextBlock Text=\"{Binding Age}\" \/>\n <\/StackPanel>\n <\/DataTemplate>\n <\/ItemsControl.ItemTemplate>\n<\/ItemsControl><\/code><\/pre>\n3.3. \uc2a4\ud0c0\uc77c \ubc0f \ud15c\ud50c\ub9bf \uc0ac\uc6a9\ud558\uae30<\/h3>\n
WPF\uc5d0\uc11c \uc2a4\ud0c0\uc77c\uacfc \ud15c\ud50c\ub9bf\uc744 \ud65c\uc6a9\ud558\uba74 UI \uc694\uc18c\uc758 \uc77c\uad00\uc131\uacfc \ud6a8\uacfc\ub97c \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. MVVM \ud328\ud134\uacfc \uacb0\ud569\ud558\uc5ec \ubdf0 \uc694\uc18c\ub97c \ub354\uc6b1 \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
<Window.Resources>\n <Style TargetType=\"Button\">\n <Setter Property=\"Background\" Value=\"LightBlue\" \/>\n <Setter Property=\"Foreground\" Value=\"White\" \/>\n <Setter Property=\"Padding\" Value=\"10\" \/>\n <\/Style>\n<\/Window.Resources>\n\n<Button Content=\"Click Me\" Command=\"{Binding ClickCommand}\" \/><\/code><\/pre>\n4. MVVM \ud328\ud134\uacfc \ucd5c\uc2e0 WPF \uae30\ub2a5\uc758 \ud1b5\ud569 \uc0ac\ub840<\/h2>\n
\uc5ec\ub7ec\ubd84\uc774 MVVM\uacfc \ucd5c\uc2e0 WPF \uae30\ub2a5\uc744 \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \uc2e4\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\ub294\ub370 \uc720\uc6a9\ud55c \uc0ac\ub840\ub97c \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. \uc608\uc0c1\ud560 \uc218 \uc788\ub294 \uc2e4\uc138\uacc4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c\ub294 To-Do List \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uac01\ud574\ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.1. To-Do List \uc571 \uc124\uacc4<\/h3>\n
\uc774 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uac04\ub2e8\ud55c To-Do List\ub97c \uc791\uc131\ud558\uace0 \uad00\ub9ac\ud558\ub294 \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\ub294 \ud560 \uc77c\uc744 \ucd94\uac00\ud558\uace0 \uc0ad\uc81c\ud560 \uc218 \uc788\uc73c\uba70, \uc644\ub8cc\ub41c \ud56d\ubaa9\uc744 \uccb4\ud06c \ud45c\uc2dc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
4.2. Model \uc815\uc758<\/h3>\n
public class TodoItem : INotifyPropertyChanged\n{\n private string _title;\n private bool _isCompleted;\n\n public string Title\n {\n get { return _title; }\n set \n {\n _title = value;\n OnPropertyChanged(nameof(Title));\n }\n }\n \n public bool IsCompleted\n {\n get { return _isCompleted; }\n set \n {\n _isCompleted = value;\n OnPropertyChanged(nameof(IsCompleted));\n }\n }\n}\n<\/code><\/pre>\n4.3. ViewModel \uad6c\ud604\ud558\uae30<\/h3>\n
public class TodoViewModel : INotifyPropertyChanged\n{\n private ObservableCollection_todoItems;\n\n public ObservableCollection TodoItems\n {\n get { return _todoItems; }\n set \n {\n _todoItems = value;\n OnPropertyChanged(nameof(TodoItems));\n }\n }\n\n public ICommand AddCommand { get; }\n\n public TodoViewModel()\n {\n TodoItems = new ObservableCollection ();\n AddCommand = new RelayCommand(AddItem);\n }\n\n private void AddItem()\n {\n TodoItems.Add(new TodoItem { Title = \"New Task\" });\n }\n}\n<\/todoitem><\/todoitem><\/todoitem><\/code><\/pre>\n 4.4. View \uad6c\ud604\ud558\uae30<\/h3>\n
<Window x:Class=\"TodoListApp.MainWindow\"\n xmlns=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\/presentation\"\n xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2006\/xaml\"\n Title=\"To-Do List\" Height=\"350\" Width=\"525\">\n <Grid>\n <ListBox ItemsSource=\"{Binding TodoItems}\">\n <ListBox.ItemTemplate>\n <DataTemplate>\n <StackPanel Orientation=\"Horizontal\">\n <CheckBox IsChecked=\"{Binding IsCompleted}\" \/>\n <TextBlock Text=\"{Binding Title}\" Margin=\"5\" \/>\n <\/StackPanel>\n <\/DataTemplate>\n <\/ListBox.ItemTemplate>\n <\/ListBox>\n <Button Content=\"Add Task\" Command=\"{Binding AddCommand}\" \/>\n <\/Grid>\n<\/Window><\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n
WPF \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uac1c\ubc1c\uc5d0 \uc788\uc5b4 MVVM \ud328\ud134\uc740 \ucf54\ub4dc\uc758 \uc7ac\uc0ac\uc6a9\uc131\uacfc \uc720\uc9c0\ubcf4\uc218\ub97c \uc27d\uac8c \ub9cc\ub4e4\uc5b4\uc90d\ub2c8\ub2e4. .NET 6\uacfc 7\uc758 \ucd5c\uc2e0 \uae30\ub2a5\uc744 \ud65c\uc6a9\ud558\uba74 \uc774\ub7ec\ud55c \ud328\ud134\uc744 \ub354\uc6b1 \ubc1c\uc804\uc2dc\ud0a4\uace0, \uc131\ub2a5\uacfc \ud6a8\uc728\uc744 \ub192\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \ubb38\uc11c\uc5d0\uc11c \uc0b4\ud3b4\ubcf8 \uc608\uc81c\uc640 \uacb0\ud569\ub41c \ucd5c\uc2e0 \uae30\ub2a5\uc744 \ud1b5\ud574 \uc5ec\ub7ec\ubd84\uc758 WPF \ud504\ub85c\uc81d\ud2b8\uc758 \ud488\uc9c8\uc744 \ub192\uc774\uae38 \ubc14\ub78d\ub2c8\ub2e4. MVVM\uacfc \ucd5c\uc2e0 WPF \uae30\ub2a5\uc744 \uacb0\ud569\ud558\uc5ec \ub354\uc6b1 \uac15\ub825\ud558\uace0 \ud6a8\uc728\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud574\ubd05\uc2dc\ub2e4!<\/p>\n<\/article>\n
<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"
- \uc608\uc678 \ucc98\ub9ac \uac1c\uc120:<\/strong> \uc608\uc678 \ucc98\ub9ac \ubc0f \ub514\ubc84\uae45 \ub3c4\uad6c\uac00 \uac15\ud654\ub418\uc5b4 \uac1c\ubc1c\uc790\uac00 \ubb38\uc81c\ub97c \ub354\uc6b1 \uc27d\uac8c \ucd94\uc801\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n
- View:<\/strong> UI \uc694\uc18c\ub85c, \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc815\ubcf4\ub97c \uc81c\uacf5\ud558\uace0 \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc744 \uc218\uc9d1\ud569\ub2c8\ub2e4.<\/li>\n