{"id":1643,"date":"2026-03-09T11:34:10","date_gmt":"2026-03-09T11:34:10","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=1643"},"modified":"2026-08-31T07:32:34","modified_gmt":"2026-08-31T07:32:34","slug":"wpf-%ea%b0%9c%eb%b0%9c-%ed%95%b5%ec%8b%ac-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=1643","title":{"rendered":"WPF \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">WPF \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\ub97c \ucc98\uc74c \ubcf4\uba74 XAML \ub54c\ubb38\uc5d0 \uc870\uae08 \ub0af\uc124\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C# \ucf54\ub4dc\ub9cc\uc73c\ub85c UI\ub97c \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uacfc \ub2ec\ub9ac \ud654\uba74 \uad6c\uc870\ub294 XAML\ub85c \uc791\uc131\ud558\uace0, \uc2e4\uc81c \ub3d9\uc791\uc740 C#\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4. \uc5ec\uae30\uc5d0 <code>DependencyProperty<\/code>, <code>Binding<\/code>, <code>DataContext<\/code>, <code>Command<\/code>, <code>Resource<\/code>, <code>Style<\/code>, <code>Template<\/code> \uac19\uc740 \uac1c\ub150\uc774 \ubd99\ub294\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc98\uc74c\uc5d0\ub294 \uac01\uac01 \ubcc4\uac1c\uc758 \uae30\ub2a5\ucc98\ub7fc \ubcf4\uc778\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc WPF\uc758 \uad6c\uc870\ub97c \ud558\ub098\uc758 \ud750\ub984\uc73c\ub85c \ubcf4\uba74 \uc0dd\uac01\ubcf4\ub2e4 \ub2e8\uc21c\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 \ud575\uc2ec\uc740 <strong>UI\uc640 \ub370\uc774\ud130\ub97c \ubd84\ub9ac\ud558\uace0 Binding\uc744 \ud1b5\ud574 \uc5f0\uacb0\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; View -&gt; DataContext -&gt; Binding -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc740 \ubc18\ub300\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc73c\ub85c \uc804\ub2ec\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\uc0ac\uc6a9\uc790 \uc785\ub825 -&gt; View -&gt; Command \/ Event -&gt; ViewModel -&gt; Business Logic -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc2dc UI\ub85c \ub3cc\uc544\uc628\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Data -&gt; ViewModel -&gt; PropertyChanged -&gt; Binding -&gt; View -&gt; UI \uac31\uc2e0\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ud750\ub984\uc744 \uc774\ud574\ud558\uba74 WPF\uc5d0\uc11c \ub4f1\uc7a5\ud558\ub294 \ub300\ubd80\ubd84\uc758 \uac1c\ub150\uc744 \ud558\ub098\uc758 \uad6c\uc870 \uc548\uc5d0\uc11c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WPF\ub780<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF(Windows Presentation Foundation)\ub294 Windows \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud558\uae30 \uc704\ud55c .NET UI \ud504\ub808\uc784\uc6cc\ud06c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Windows \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud654\uba74\uc744 \uad6c\uc131\ud558\uace0 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 \ucc98\ub9ac\ud558\uba70 \ub370\uc774\ud130 \ubc14\uc778\ub529, \uc2a4\ud0c0\uc77c, \ud15c\ud50c\ub9bf, \uc560\ub2c8\uba54\uc774\uc158, \uadf8\ub798\ud53d \ub80c\ub354\ub9c1 \ub4f1\uc758 \uae30\ub2a5\uc744 \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF \uac1c\ubc1c\uc758 \uae30\ubcf8 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; View -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">XAML\uc740 UI\ub97c \uc120\uc5b8\ud558\uace0 C#\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ub3d9\uc791\uacfc \ub85c\uc9c1\uc744 \uad6c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \uc774\uac83\uc744 \ub2e8\uc21c\ud788 &#8220;XAML\uc740 \ud654\uba74, C#\uc740 \ucf54\ub4dc&#8221;\ub77c\uace0\ub9cc \uc774\ud574\ud558\uba74 WPF\uc758 \ud575\uc2ec\uc744 \ub193\uce58\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c \uc911\uc694\ud55c \uac83\uc740 <strong>UI\uc640 \ub370\uc774\ud130 \uc0ac\uc774\ub97c Binding System\uc73c\ub85c \uc5f0\uacb0\ud558\ub294 \uad6c\uc870<\/strong>\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">XAML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c\ub294 XAML\uc744 \uc0ac\uc6a9\ud574 UI\ub97c \uc120\uc5b8\uc801\uc73c\ub85c \uc791\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;StackPanel&gt;\n    &lt;TextBlock Text=\"Hello\" \/&gt;\n    &lt;Button Content=\"Start\" \/&gt;\n&lt;\/StackPanel&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ucf54\ub4dc\ub294 UI\uc758 \uad6c\uc870\ub97c \uc120\uc5b8\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; UI Object -&gt; UI Tree\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">C#\uc5d0\uc11c \uc9c1\uc811 UI \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\ub294 \ub300\uc2e0 XAML\uc744 \uc0ac\uc6a9\ud558\uba74 \ud654\uba74\uc758 \uad6c\uc870\uc640 \uc18d\uc131\uc744 \ucf54\ub4dc\uc640 \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf5\uc7a1\ud55c UI\uc5d0\uc11c\ub294 \uc774 \ucc28\uc774\uac00 \uc0c1\ub2f9\ud788 \ud06c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; UI \uad6c\uc870\nC# -&gt; \ub3d9\uc791 \/ \ub85c\uc9c1\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 Binding\uc744 \uc0ac\uc6a9\ud558\uba74 UI\uc640 ViewModel\uae4c\uc9c0 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; View -&gt; Binding -&gt; ViewModel\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">UI Tree<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 UI\ub294 \ubd80\ubaa8\uc640 \uc790\uc2dd \uad00\uacc4\ub97c \uac00\uc9c0\ub294 Tree \uad6c\uc870\ub85c \uad6c\uc131\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 \ud654\uba74\uc774 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\uc131\ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Window -&gt; Grid -&gt; StackPanel -&gt; TextBlock\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub978 UI\ub3c4 \uac19\uc740 \ubc29\uc2dd\uc73c\ub85c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Window -&gt; Grid -&gt; StackPanel -&gt; Button\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c UI Tree\uac00 \uc911\uc694\ud55c \uc774\uc720\ub294 \ub2e8\uc21c\ud788 \ud654\uba74\uc758 \uacc4\uce35 \uad6c\uc870\ub97c \ud45c\ud604\ud558\uae30 \ub54c\ubb38\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec WPF \uae30\ub2a5\uc774 \uc774 Tree\ub97c \uae30\uc900\uc73c\ub85c \ub3d9\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UI Tree -&gt; DataContext -&gt; Resource -&gt; Binding -&gt; Routed Event\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c WPF\uc5d0\uc11c \ud2b9\uc815 Control\uc758 \ub3d9\uc791\uc774 \uc608\uc0c1\uacfc \ub2e4\ub974\ub2e4\uba74 \ud574\ub2f9 Control\ub9cc \ubcf4\ub294 \uac83\uc774 \uc544\ub2c8\ub77c <strong>UI Tree\uc5d0\uc11c \uc5b4\ub514\uc5d0 \uc704\uce58\ud574 \uc788\ub294\uc9c0<\/strong> \uac19\uc774 \ud655\uc778\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">DependencyObject<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 \uc8fc\uc694 UI \uac1d\uccb4\ub4e4\uc740 <code>DependencyObject<\/code>\ub97c \uae30\ubc18\uc73c\ub85c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 Property System\uc744 \uc774\ud574\ud558\ub824\uba74 \uc774 \uad6c\uc870\ub97c \uc54c\uc544\ub458 \ud544\uc694\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DependencyObject -&gt; UIElement -&gt; FrameworkElement -&gt; Control\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubaa8\ub4e0 WPF \uac1d\uccb4\uac00 \ub3d9\uc77c\ud55c \uacc4\uce35\uc744 \uac00\uc9c0\ub294 \uac83\uc740 \uc544\ub2c8\uc9c0\ub9cc, \ub9ce\uc740 UI \uac1d\uccb4\uac00 \uc774 \uad6c\uc870\ub97c \uae30\ubc18\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc9c4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>DependencyProperty<\/code> \uc5ed\uc2dc \uc774 Property System\uacfc \uc5f0\uacb0\ub418\uc5b4 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">DependencyProperty<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c \uc77c\ubc18\uc801\uc778 C# Property\uc640 \ub2e4\ub978 \ud575\uc2ec \uac1c\ub150\uc774 <code>DependencyProperty<\/code>\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ud45c\uc801\uc778 WPF \uc18d\uc131\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>TextBox.Text\nButton.IsEnabled\nControl.Background\nFrameworkElement.Width\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub7ec\ud55c Property\ub4e4\uc740 WPF\uc758 Property System\uc5d0 \uc758\ud574 \uad00\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DependencyProperty -&gt; Binding\nDependencyProperty -&gt; Style\nDependencyProperty -&gt; Animation\nDependencyProperty -&gt; Trigger\nDependencyProperty -&gt; Property Inheritance\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ubc18 C# Property\uac00 \ub2e8\uc21c\ud788 \uac12\uc744 \uc800\uc7a5\ud558\uace0 \ubc18\ud658\ud558\ub294 \uc5ed\ud560\uc5d0 \uac00\uae5d\ub2e4\uba74 DependencyProperty\ub294 WPF\uc758 \uc5ec\ub7ec \uc2dc\uc2a4\ud15c\uacfc \uc5f0\uacb0\ub418\ub294 Property\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub798\uc11c WPF\uc758 UI Property\ub97c \ub2e8\uc21c\ud55c \ubcc0\uc218\ucc98\ub7fc \uc0dd\uac01\ud558\uba74 Binding\uc774\ub098 Style\uc774 \uc5b4\ub5bb\uac8c \ub3d9\uc791\ud558\ub294\uc9c0 \uc774\ud574\ud558\uae30 \uc5b4\ub824\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">DataContext<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c Binding\uc744 \uc774\ud574\ud558\ub824\uba74 <code>DataContext<\/code>\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">DataContext\ub294 \ud604\uc7ac UI\uc5d0\uc11c Binding\uc774 \uae30\ubcf8\uc801\uc73c\ub85c \ucc38\uc870\ud560 \uac1d\uccb4\ub97c \uc9c0\uc815\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 Window\uc5d0 MainViewModel\uc744 DataContext\ub85c \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Window -&gt; DataContext -&gt; MainViewModel\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ViewModel\uc5d0 \ub2e4\uc74c\uacfc \uac19\uc740 Property\uac00 \uc788\ub2e4\uace0 \ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public string UserName { get; set; }\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">XAML\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;TextBlock Text=\"{Binding UserName}\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Binding\uc740 \ud604\uc7ac UI\uc758 DataContext\ub97c \uae30\uc900\uc73c\ub85c <code>UserName<\/code>\uc744 \ucc3e\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DataContext -&gt; MainViewModel -&gt; UserName -&gt; TextBlock.Text\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">DataContext\ub294 UI Tree\ub97c \ub530\ub77c \uc804\ub2ec\ub420 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \ubd80\ubaa8\uc640 \uc790\uc2dd \uad00\uacc4\uac00 \ub9e4\uc6b0 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Data Binding<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 \ud575\uc2ec \uae30\ub2a5 \uc911 \ud558\ub098\uac00 Data Binding\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uc640 \ub370\uc774\ud130\ub97c \uc9c1\uc811 \uc5f0\uacb0\ud558\ub294 \ub300\uc2e0 Binding System\uc744 \ud1b5\ud574 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel.Property -&gt; Binding -&gt; UI.Property\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;TextBlock Text=\"{Binding UserName}\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub77c\uace0 \ud558\uba74 ViewModel\uc758 <code>UserName<\/code>\uacfc TextBlock\uc758 <code>Text<\/code>\uac00 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Binding \ubc29\ud5a5\uc740 \ud06c\uac8c OneWay\uc640 TwoWay\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>OneWay -&gt; ViewModel -&gt; UI\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>TwoWay -&gt; ViewModel &lt;-&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc785\ub825\ucc3d\ucc98\ub7fc \uc0ac\uc6a9\uc790\uac00 \uac12\uc744 \ubcc0\uacbd\ud558\ub294 UI\uc5d0\uc11c\ub294 TwoWay Binding\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;TextBox Text=\"{Binding UserName, Mode=TwoWay}\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ud558\uba74 \uc0ac\uc6a9\uc790\uac00 \uc785\ub825\ud55c \uac12\uc774 ViewModel\ub85c \uc804\ub2ec\ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">INotifyPropertyChanged<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Binding\uc774 \uc5f0\uacb0\ub418\uc5b4 \uc788\ub2e4\uace0 \ud574\uc11c \uc77c\ubc18 C# Property\uc758 \ubcc0\uacbd\uc744 WPF\uac00 \uc790\ub3d9\uc73c\ub85c \uac10\uc9c0\ud558\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public string UserName { get; set; }\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9cc \uac00\uc9c0\uace0 \uc788\ub2e4\uba74 \ucf54\ub4dc\uc5d0\uc11c <code>UserName<\/code>\uc744 \ubcc0\uacbd\ud588\uc744 \ub54c Binding\ub41c UI\uac00 \ubcc0\uacbd \uc0ac\uc2e4\uc744 \uc54c \uc218 \uc788\ub3c4\ub85d \ubcc4\ub3c4\uc758 \uc54c\ub9bc\uc774 \ud544\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub54c <code>INotifyPropertyChanged<\/code>\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel Property \ubcc0\uacbd -&gt; PropertyChanged -&gt; Binding \uac10\uc9c0 -&gt; UI \uac31\uc2e0\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">MVVM\uc5d0\uc11c ViewModel\uc774 <code>INotifyPropertyChanged<\/code>\ub97c \uad6c\ud604\ud558\ub294 \uc774\uc720\ub3c4 \uc5ec\uae30\uc5d0 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">MVVM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c\ub294 MVVM(Model-View-ViewModel) \ud328\ud134\uc744 \ub9ce\uc774 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac01 \uc5ed\ud560\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Model -&gt; \ub370\uc774\ud130 \/ \ub3c4\uba54\uc778\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>View -&gt; UI\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel -&gt; \ud654\uba74 \uc0c1\ud0dc \/ \uc0ac\uc6a9\uc790 \ub3d9\uc791\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4\uc801\uc778 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>View -&gt; ViewModel -&gt; Service -&gt; Repository -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">View\ub294 \ud654\uba74\uc744 \ud45c\ud604\ud558\uace0 ViewModel\uc740 \ud654\uba74\uc5d0\uc11c \ud544\uc694\ud55c \uc0c1\ud0dc\uc640 \uc0ac\uc6a9\uc790 \ub3d9\uc791\uc744 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Service\ub098 Repository\ub294 \uc2e4\uc81c \ub370\uc774\ud130 \uc811\uadfc\uacfc \uc678\ubd80 \uc2dc\uc2a4\ud15c \uc5f0\ub3d9\uc744 \ub2f4\ub2f9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">MVVM\uc758 \ud575\uc2ec\uc740 \ud30c\uc77c\uc744 \uc138 \uac1c\ub85c \ub098\ub204\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc758 \uacb0\ud569\uc744 \uc904\uc774\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Command<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc84\ud2bc \ud074\ub9ad\ucc98\ub7fc \uc0ac\uc6a9\uc790\uc758 \ud589\ub3d9\uc744 ViewModel\uc5d0\uc11c \ucc98\ub9ac\ud560 \ub54c <code>Command<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Button\n    Content=\"Save\"\n    Command=\"{Binding SaveCommand}\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button -&gt; Command -&gt; ViewModel -&gt; Business Logic -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Code-behind\uc5d0\uc11c \uc9c1\uc811 Click \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud558\ub294 \ubc29\uc2dd\uacfc \ube44\uad50\ud558\uba74 UI\uc640 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc744 \ubd84\ub9ac\ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \ubaa8\ub4e0 \uc774\ubca4\ud2b8\ub97c \ubb34\uc870\uac74 Command\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud558\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">View\uc5d0\ub9cc \uc758\ubbf8\uac00 \uc788\ub294 \ub2e8\uc21c\ud55c UI \ub3d9\uc791\uc774\ub77c\uba74 Code-behind\uac00 \ub354 \uc801\uc808\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Code-behind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">XAML\uacfc \uc5f0\uacb0\ub41c <code>.xaml.cs<\/code> \ud30c\uc77c\uc744 Code-behind\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>MainWindow.xaml -&gt; MainWindow.xaml.cs\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\uc870\ub97c \uac00\uc9c4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Code-behind\uc5d0\uc11c\ub294 View\uc5d0 \uc885\uc18d\uc801\uc778 \ub3d9\uc791\uc744 \uc9c1\uc811 \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button Event -&gt; Code-behind -&gt; UI \ucc98\ub9ac\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc791\uc740 \ud504\ub85c\uadf8\ub7a8\uc5d0\uc11c\ub294 \uc774\uac83\ub9cc\uc73c\ub85c\ub3c4 \ucda9\ubd84\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubb38\uc81c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud575\uc2ec \ub85c\uc9c1\uae4c\uc9c0 Code-behind\uc5d0 \ub123\ub294 \uacbd\uc6b0\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button Click -&gt; HTTP \uc694\uccad -&gt; DB \uc870\ud68c -&gt; Business Logic -&gt; UI \uac31\uc2e0\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub807\uac8c \ub418\uba74 View\uac00 \ub108\ubb34 \ub9ce\uc740 \ucc45\uc784\uc744 \uac00\uc9c0\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c \uc77c\ubc18\uc801\uc778 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uacbd\uacc4\ub97c \ub450\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>View -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Resource<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 Resource\ub294 UI\uc5d0\uc11c \uacf5\uc720\ud560 \uac1d\uccb4\ub97c \uc815\uc758\ud558\ub294 \uae30\ub2a5\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 Brush\ub97c Resource\ub85c \ub4f1\ub85d\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Window.Resources&gt;\n    &lt;SolidColorBrush\n        x:Key=\"PrimaryBrush\"\n        Color=\"SteelBlue\" \/&gt;\n&lt;\/Window.Resources&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ud6c4 UI\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Button\n    Background=\"{StaticResource PrimaryBrush}\"\n    Content=\"Start\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resource\ub294 \uc5ec\ub7ec \ubc94\uc704\uc5d0\uc11c \uc815\uc758\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Application.Resources -&gt; Window.Resources -&gt; Panel.Resources -&gt; Control.Resources\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc694\ud55c Resource\ub97c \uac00\uae4c\uc6b4 \ubc94\uc704\uc5d0\uc11c \ucc3e\uace0 \uc5c6\uc73c\uba74 \uc0c1\uc704 \ubc94\uc704\ub97c \ud0d0\uc0c9\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc774\ud574\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">StaticResource\uc640 DynamicResource<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Resource\ub97c \uc0ac\uc6a9\ud560 \ub54c <code>StaticResource<\/code>\uc640 <code>DynamicResource<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>StaticResource -&gt; Resource \ucc38\uc870\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>DynamicResource -&gt; \uc2e4\ud589 \uc911 Resource \ubcc0\uacbd\uc5d0 \ub300\uc751\ud558\ub294 \ucc38\uc870\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ubc18\uc801\uc778 \uace0\uc815 Resource\ub294 StaticResource\ub85c \ucda9\ubd84\ud55c \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Theme\ucc98\ub7fc \uc2e4\ud589 \uc911 Resource\uac00 \ubcc0\uacbd\ub420 \uc218 \uc788\ub294 \uad6c\uc870\uc5d0\uc11c\ub294 DynamicResource\uac00 \ud544\uc694\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Style<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec Control\uc5d0 \ub3d9\uc77c\ud55c \uc18d\uc131\uc744 \uc801\uc6a9\ud558\ub824\uba74 Style\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;Style TargetType=\"Button\"&gt;\n    &lt;Setter Property=\"Margin\" Value=\"5\" \/&gt;\n    &lt;Setter Property=\"Padding\" Value=\"10\" \/&gt;\n&lt;\/Style&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uad6c\uc870\ub97c \ud1b5\ud574 \uacf5\ud1b5 UI \uaddc\uce59\uc744 \uc911\uc559\uc5d0\uc11c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Resource -&gt; Style -&gt; Control\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubc84\ud2bc, \uc785\ub825\ucc3d, TextBlock \ub4f1\uc758 \ub514\uc790\uc778 \uaddc\uce59\uc774 \ub9ce\uc544\uc9c8\uc218\ub85d Style\uc758 \uac00\uce58\uac00 \ucee4\uc9c4\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">ControlTemplate<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>ControlTemplate<\/code>\uc740 Control\uc758 \uc2dc\uac01\uc801\uc778 \uad6c\uc870\ub97c \ubcc0\uacbd\ud560 \ub54c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Style\uc774 \uc8fc\ub85c Control\uc758 \uc18d\uc131\uc744 \uc124\uc815\ud55c\ub2e4\uba74 ControlTemplate\uc740 Control\uc774 \uc5b4\ub5a4 \uad6c\uc870\ub85c \ud45c\ud604\ub418\ub294\uc9c0\ub97c \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Control -&gt; ControlTemplate -&gt; Visual Structure\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 Button\uc758 \uae30\ubcf8 \ubaa8\uc591\uc744 \uc644\uc804\ud788 \ub2e4\ub978 UI\ub85c \ubc14\uafc0 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button -&gt; ControlTemplate -&gt; Custom Button UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Control\uc758 \uae30\ub2a5\uacfc \uc2dc\uac01\uc801\uc778 \ud45c\ud604\uc744 \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc774 WPF Template \uc2dc\uc2a4\ud15c\uc758 \uc911\uc694\ud55c \ud2b9\uc9d5\uc774\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">DataTemplate<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>DataTemplate<\/code>\uc740 \ub370\uc774\ud130\ub97c UI\ub85c \ud45c\ud604\ud558\ub294 \ubc29\ubc95\uc744 \uc815\uc758\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 User \ubaa9\ub85d\uc774 \uc788\ub2e4\uba74<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Users -&gt; ItemsSource -&gt; DataTemplate -&gt; User UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud615\ud0dc\ub85c \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ListBox ItemsSource=\"{Binding Users}\"&gt;\n    &lt;ListBox.ItemTemplate&gt;\n        &lt;DataTemplate&gt;\n            &lt;StackPanel&gt;\n                &lt;TextBlock Text=\"{Binding Name}\" \/&gt;\n                &lt;TextBlock Text=\"{Binding Id}\" \/&gt;\n            &lt;\/StackPanel&gt;\n        &lt;\/DataTemplate&gt;\n    &lt;\/ListBox.ItemTemplate&gt;\n&lt;\/ListBox&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac01 User \uac1d\uccb4\uac00 DataTemplate\uc744 \ud1b5\ud574 UI\ub85c \ud45c\ud604\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ControlTemplate\uacfc \ud5f7\uac08\ub9ac\uae30 \uc26c\uc6b4\ub370 \uc5ed\ud560\uc740 \ub2e4\ub974\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ControlTemplate -&gt; Control\uc758 \uc2dc\uac01\uc801 \uad6c\uc870\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>DataTemplate -&gt; Data\ub97c \ud45c\ud604\ud558\ub294 UI\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">ItemsControl<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec \ub370\uc774\ud130\ub97c \ubc18\ubcf5\ud574\uc11c UI\ub85c \ud45c\uc2dc\ud560 \ub54c <code>ItemsControl<\/code> \uacc4\uc5f4\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ud45c\uc801\uc778 Control\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ItemsControl -&gt; ListBox -&gt; ListView -&gt; ComboBox\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud575\uc2ec \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Collection -&gt; ItemsSource -&gt; Item -&gt; DataTemplate -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\uc11c \ubaa9\ub85d \ud654\uba74\uc744 \ub9cc\ub4e4 \ub54c \uc790\uc8fc \uc0ac\uc6a9\ud558\uac8c \ub418\ub294 \uad6c\uc870\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Converter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">ViewModel\uc758 \ub370\uc774\ud130\uc640 UI\uc5d0\uc11c \ud544\uc694\ud55c \ub370\uc774\ud130 \ud0c0\uc785\uc774 \ub2e4\ub97c \ub54c <code>IValueConverter<\/code>\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bool -&gt; Visibility\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac19\uc740 \ubcc0\ud658\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ViewModel\uc5d0\ub294 <code>bool IsVisible<\/code>\uc774 \uc788\uc9c0\ub9cc UI\uc5d0\uc11c\ub294 <code>Visibility.Visible<\/code> \ub610\ub294 <code>Visibility.Collapsed<\/code>\uac00 \ud544\uc694\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ub54c \ub2e4\uc74c\uacfc \uac19\uc740 \ud750\ub984\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel Value -&gt; Converter -&gt; UI Value\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Converter\ub294 \ub2e8\uc21c\ud55c \ud45c\ud604 \ubcc0\ud658\uc5d0 \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc801\uc808\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf5\uc7a1\ud55c \ube44\uc988\ub2c8\uc2a4 \ub85c\uc9c1\uc744 Converter\uc5d0 \ub123\uae30 \uc2dc\uc791\ud558\uba74 View\uc640 \ub85c\uc9c1\uc758 \ucc45\uc784\uc774 \ub2e4\uc2dc \uc11e\uc774\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Routed Event<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc5d0\ub294 \uc77c\ubc18\uc801\uc778 C# Event\uc640 \ub2e4\ub978 Routed Event\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">UI Tree\uac00 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub77c\uace0 \ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Window -&gt; Grid -&gt; Button\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Button\uc5d0\uc11c \ubc1c\uc0dd\ud55c \uc774\ubca4\ud2b8\ub294 \ubd80\ubaa8 \ubc29\ud5a5\uc73c\ub85c \uc804\ub2ec\ub420 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Button -&gt; Grid -&gt; Window\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uac83\uc774 Bubbling\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc18\ub300\ub85c \uc0c1\uc704\uc5d0\uc11c \ud558\uc704\ub85c \uc804\ub2ec\ub418\ub294 Tunneling\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Window -&gt; Grid -&gt; Button\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c WPF\uc5d0\uc11c\ub294 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud55c \uac1d\uccb4\uc640 \uc774\ubca4\ud2b8\ub97c \ucc98\ub9ac\ud558\ub294 \uac1d\uccb4\uac00 \ub2e4\ub97c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Layout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 UI \ubc30\uce58\ub294 Layout System\uc744 \ud1b5\ud574 \ucc98\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ud45c\uc801\uc778 Panel\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Grid -&gt; \ud589 \/ \uc5f4 \uae30\ubc18 \ubc30\uce58\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>StackPanel -&gt; \uc21c\ucc28 \ubc30\uce58\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>DockPanel -&gt; \uac00\uc7a5\uc790\ub9ac \uae30\uc900 \ubc30\uce58\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>WrapPanel -&gt; \uacf5\uac04\uc5d0 \ub530\ub978 \uc904\ubc14\uafc8 \ubc30\uce58\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Canvas -&gt; \uc88c\ud45c \uae30\ubc18 \ubc30\uce58\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WPF Layout\uc758 \uae30\ubcf8 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Measure -&gt; Arrange -&gt; Render\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubd80\ubaa8\uac00 \uc790\uc2dd\uc5d0\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uacf5\uac04\uc744 \uc804\ub2ec\ud558\uace0 \uc790\uc2dd\uc758 \ud06c\uae30\ub97c \uacc4\uc0b0\ud55c \ub4a4 \ucd5c\uc885 \uc704\uce58\uc640 \ud06c\uae30\ub97c \ubc30\uce58\ud55c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Measure\uc640 Arrange<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF Layout \ubb38\uc81c\ub97c \uc774\ud574\ud558\ub824\uba74 <code>Measure<\/code>\uc640 <code>Arrange<\/code>\ub97c \uc54c\uc544\ub458 \ud544\uc694\uac00 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Parent -&gt; Measure -&gt; Child Size \uacc4\uc0b0 -&gt; Arrange -&gt; Child \uc704\uce58 \/ \ud06c\uae30 \uacb0\uc815 -&gt; Render\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf5\uc7a1\ud55c UI\uc5d0\uc11c Layout \uacc4\uc0b0\uc774 \uacfc\ub3c4\ud558\uac8c \ubc1c\uc0dd\ud558\uba74 \uc131\ub2a5\uc5d0 \uc601\ud5a5\uc744 \uc904 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c WPF \uc131\ub2a5 \ubb38\uc81c\ub97c \ubcfc \ub54c\ub294 \ub2e8\uc21c\ud788 Control \uac1c\uc218\ub9cc \ud655\uc778\ud560 \uac83\uc774 \uc544\ub2c8\ub77c Layout \ube44\uc6a9\ub3c4 \ud655\uc778\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Dispatcher<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 UI \uac1d\uccb4\ub294 \uae30\ubcf8\uc801\uc73c\ub85c UI Thread\uc5d0\uc11c \uc811\uadfc\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ubc31\uadf8\ub77c\uc6b4\ub4dc Thread\uc5d0\uc11c UI\ub97c \uc9c1\uc811 \ubcc0\uacbd\ud558\uba74 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Worker Thread -&gt; Dispatcher -&gt; UI Thread -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><code>Dispatcher<\/code>\ub294 \ud2b9\uc815 \uc791\uc5c5\uc744 UI Thread\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\ub3c4\ub85d \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc MVVM \uad6c\uc870\uc5d0\uc11c\ub294 UI\ub97c \uc9c1\uc811 \ubcc0\uacbd\ud558\uae30\ubcf4\ub2e4 ViewModel\uc758 \uc0c1\ud0dc\ub97c \ubcc0\uacbd\ud558\uace0 Binding\uc744 \ud1b5\ud574 UI\ub97c \uac31\uc2e0\ud558\ub294 \ubc29\uc2dd\uc774 \ub354 \uc790\uc5f0\uc2a4\ub7fd\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Background Task -&gt; ViewModel State \ubcc0\uacbd -&gt; PropertyChanged -&gt; Binding -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ube44\ub3d9\uae30 \ucc98\ub9ac<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\ub294 UI Thread \uae30\ubc18\uc758 \ub370\uc2a4\ud06c\ud1b1 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774\uae30 \ub54c\ubb38\uc5d0 UI Thread\ub97c \uc624\ub798 \uc810\uc720\ud558\uba74 \ud654\uba74\uc774 \uba48\ucd98\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc798\ubabb\ub41c \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UI Thread -&gt; Heavy Work -&gt; \uc644\ub8cc \ub300\uae30 -&gt; UI \uba48\ucda4\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc774\ub098 \ud30c\uc77c I\/O\ucc98\ub7fc \uae30\ub2e4\ub9ac\ub294 \uc791\uc5c5\uc740 <code>async\/await<\/code>\ub97c \uc0ac\uc6a9\ud574 UI Thread\ub97c \uc7a5\uc2dc\uac04 \uc810\uc720\ud558\uc9c0 \uc54a\ub3c4\ub85d \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UI -&gt; ViewModel -&gt; Service -&gt; await -&gt; Result -&gt; PropertyChanged -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc911\uc694\ud55c \uac83\uc740 <code>async<\/code> \ud0a4\uc6cc\ub4dc\ub97c \ubd99\uc774\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>UI Thread\ub97c \uc624\ub798 \uc810\uc720\ud558\uc9c0 \uc54a\ub294 \uad6c\uc870\ub97c \ub9cc\ub4dc\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Dependency Injection<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub85c\uc81d\ud2b8\uac00 \ucee4\uc9c0\uba74 ViewModel\uacfc Service \uc0ac\uc774\uc5d0 \uc758\uc874\uc131\uc774 \uc99d\uac00\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel -&gt; UserService -&gt; ApiClient\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uac1d\uccb4\ub97c \ud074\ub798\uc2a4 \ub0b4\ubd80\uc5d0\uc11c \uc9c1\uc811 \uc0dd\uc131\ud558\uba74 \uacb0\ud569\ub3c4\uac00 \ub192\uc544\uc9c4\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dependency Injection\uc744 \uc0ac\uc6a9\ud558\uba74 \uac1d\uccb4\uc758 \uc0dd\uc131\uacfc \uc758\uc874\uc131 \uc5f0\uacb0\uc744 \uc678\ubd80\uc5d0\uc11c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DI Container -&gt; ApiClient -&gt; UserService -&gt; ViewModel\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">ViewModel\uc740 \uc0dd\uc131\uc790\ub97c \ud1b5\ud574 \ud544\uc694\ud55c Service\ub97c \uc804\ub2ec\ubc1b\ub294\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public MainViewModel(UserService userService)\n{\n    _userService = userService;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uad6c\uc870\ub294 \ud14c\uc2a4\ud2b8\uc5d0\uc11c \uc2e4\uc81c Service \ub300\uc2e0 Mock\uc774\ub098 Fake \uac1d\uccb4\ub97c \uc804\ub2ec\ud558\uae30\ub3c4 \uc27d\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WPF\uc758 \ub80c\ub354\ub9c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\ub294 Windows\uc758 \uadf8\ub798\ud53d \uc2dc\uc2a4\ud15c\uc744 \uc774\uc6a9\ud574 UI\ub97c \ub80c\ub354\ub9c1\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uac1c\ubc1c\uc790\uac00 \ub0b4\ubd80 \ub80c\ub354\ub9c1 \uacfc\uc815\uc744 \uc9c1\uc811 \uc81c\uc5b4\ud560 \ud544\uc694\ub294 \uc5c6\uc9c0\ub9cc \uae30\ubcf8\uc801\uc778 \ud750\ub984\uc740 \uc54c\uc544\ub450\uba74 \uc88b\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML \/ UI Object -&gt; Layout -&gt; Render -&gt; Composition -&gt; \ud654\uba74\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Layout\uc740 \ub2e4\uc2dc<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Measure -&gt; Arrange\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uacfc\uc815\uc744 \uac70\uce5c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub530\ub77c\uc11c \ubcf5\uc7a1\ud55c UI\ub97c \ub9cc\ub4e4 \ub54c\ub294 UI \uad6c\uc870 \uc790\uccb4\ubfd0\ub9cc \uc544\ub2c8\ub77c Layout\uacfc Rendering \ube44\uc6a9\ub3c4 \uace0\ub824\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WPF \ud504\ub85c\uc81d\ud2b8 \uad6c\uc870<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\uc81c \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 \uc5ed\ud560\uc5d0 \ub530\ub77c \ucf54\ub4dc\ub97c \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>View -&gt; UI\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel -&gt; \ud654\uba74 \uc0c1\ud0dc \/ \uc0ac\uc6a9\uc790 \ub3d9\uc791\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Model -&gt; \ub370\uc774\ud130 \/ \ub3c4\uba54\uc778\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Service -&gt; \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uae30\ub2a5 \/ \uc678\ubd80 \uc2dc\uc2a4\ud15c \uc5f0\ub3d9\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Repository -&gt; \ub370\uc774\ud130 \uc811\uadfc\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Resources -&gt; Style \/ Theme \/ Shared Resource\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4\uc801\uc778 \uad6c\uc870\ub97c \ud558\ub098\ub85c \ubb36\uc73c\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>View -&gt; ViewModel -&gt; Service -&gt; Repository -&gt; Database \/ API\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub85c\uc81d\ud2b8 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \uae30\ub2a5 \ub2e8\uc704\ub85c \ubd84\ub9ac\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Application -&gt; Feature -&gt; View -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud3f4\ub354 \uad6c\uc870 \uc790\uccb4\ubcf4\ub2e4 \uc911\uc694\ud55c \uac83\uc740 \uac01 \uacc4\uce35\uc758 \ucc45\uc784\uc744 \uba85\ud655\ud558\uac8c \uc720\uc9c0\ud558\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WPF\uc5d0\uc11c \uc790\uc8fc \ubc1c\uc0dd\ud558\ub294 \ubb38\uc81c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Binding\uc774 \ub3d9\uc791\ud558\uc9c0 \uc54a\ub294\ub2e4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c \ud750\ub984\uc744 \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DataContext -&gt; Binding Path -&gt; Property -&gt; PropertyChanged -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \uc911 \ud558\ub098\uac00 \uc798\ubabb\ub418\uc5b4 \uc788\uc744 \uac00\ub2a5\uc131\uc774 \ub192\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">UI\uac00 \uac31\uc2e0\ub418\uc9c0 \uc54a\ub294\ub2e4<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Property \ubcc0\uacbd -&gt; PropertyChanged -&gt; Binding -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774 \ud750\ub984\uc774 \uc815\uc0c1\uc801\uc73c\ub85c \uc5f0\uacb0\ub418\uc5b4 \uc788\ub294\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">UI\uac00 \uba48\ucd98\ub2e4<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>UI Thread -&gt; \uc624\ub798 \uac78\ub9ac\ub294 \uc791\uc5c5 -&gt; UI \uc751\ub2f5 \uc9c0\uc5f0\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\uc870\uc778\uc9c0 \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Style\uc774 \uc801\uc6a9\ub418\uc9c0 \uc54a\ub294\ub2e4<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>Resource Scope -&gt; Resource Key -&gt; Resource \ucc38\uc870 -&gt; Style -&gt; Control\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc21c\uc11c\ub85c \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ubaa9\ub85d UI\uac00 \uc774\uc0c1\ud558\ub2e4<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>ItemsSource -&gt; Item -&gt; DataTemplate -&gt; Binding -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uad6c\uc870\ub97c \ud655\uc778\ud55c\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">WPF \uc804\uccb4 \ud750\ub984<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc9c0\uae08\uae4c\uc9c0\uc758 \ub0b4\uc6a9\uc744 \ud558\ub098\ub85c \ubb36\uc73c\uba74 WPF \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ud750\ub984\uc73c\ub85c \uc774\ud574\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; View -&gt; DataContext -&gt; Binding -&gt; ViewModel -&gt; Service -&gt; Repository -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc740 \ubc18\ub300\ub85c \ub4e4\uc5b4\uc628\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>User Input -&gt; View -&gt; Command \/ Event -&gt; ViewModel -&gt; Business Logic -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc2dc UI\ub85c \uc804\ub2ec\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Data -&gt; ViewModel -&gt; PropertyChanged -&gt; Binding -&gt; View -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">UI\uac00 \uc0dd\uc131\ub418\uace0 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub418\ub294 \uacfc\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; UI Object -&gt; UI Tree -&gt; Measure -&gt; Arrange -&gt; Render -&gt; \ud654\uba74\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 Property System\uc740 \ubcc4\ub3c4\uc758 \ucd95\uc73c\ub85c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DependencyProperty -&gt; Binding \/ Style \/ Animation \/ Trigger \/ Property Inheritance\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Resource\uc640 Style\uc740 UI\ub97c \uacf5\ud1b5\ud654\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Resource -&gt; Style -&gt; Control\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub370\uc774\ud130\ub97c UI\ub85c \ud45c\ud604\ud558\ub294 \uacfc\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Collection -&gt; ItemsSource -&gt; DataTemplate -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790 \ub3d9\uc791\uacfc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>User Input -&gt; Command -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uc815\ub9ac<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\ub294 \ub2e8\uc21c\ud788 Windows \ud654\uba74\uc744 \ub9cc\ub4dc\ub294 UI \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">XAML\uc744 \ud1b5\ud574 UI\ub97c \uc120\uc5b8\ud558\uace0 UI Tree\ub97c \uad6c\uc131\ud55c \ub4a4 DataContext\uc640 Binding\uc744 \ud1b5\ud574 ViewModel\uacfc \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ViewModel\uc740 \ud654\uba74\uc758 \uc0c1\ud0dc\uc640 \uc0ac\uc6a9\uc790 \ub3d9\uc791\uc744 \uad00\ub9ac\ud558\uace0 Service\uc640 Repository\ub97c \ud1b5\ud574 \uc2e4\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub85c\uc9c1\uacfc \ub370\uc774\ud130\ub97c \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc804\uccb4\uc801\uc778 \uad6c\uc870\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>XAML -&gt; View -&gt; DataContext -&gt; Binding -&gt; ViewModel -&gt; Service -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc740<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>User Input -&gt; View -&gt; Command \/ Event -&gt; ViewModel -&gt; Logic\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc73c\ub85c \ub4e4\uc5b4\uac04\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ViewModel -&gt; PropertyChanged -&gt; Binding -&gt; View -&gt; UI Update\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub85c \ub2e4\uc2dc \ud654\uba74\uc5d0 \ubc18\uc601\ub41c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 \uc8fc\uc694 \uae30\ub2a5\ub3c4 \uc774 \uad6c\uc870 \uc548\uc5d0\uc11c \ubcf4\uba74 \uc5ed\ud560\uc774 \uba85\ud655\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DependencyProperty -&gt; WPF Property System\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>DataContext -&gt; Binding\uc758 \uae30\uc900 \uac1d\uccb4\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Binding -&gt; UI\uc640 \ub370\uc774\ud130 \uc5f0\uacb0\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>INotifyPropertyChanged -&gt; \uc0c1\ud0dc \ubcc0\uacbd \uc54c\ub9bc\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Command -&gt; \uc0ac\uc6a9\uc790 \ub3d9\uc791\uacfc ViewModel \uc5f0\uacb0\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Resource -&gt; \uacf5\uc720 \uac1d\uccb4\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Style -&gt; Control \uacf5\ud1b5 \uc18d\uc131\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>DataTemplate -&gt; \ub370\uc774\ud130\ub97c UI\ub85c \ud45c\ud604\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>ControlTemplate -&gt; Control\uc758 \uc2dc\uac01\uc801 \uad6c\uc870 \ubcc0\uacbd\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Routed Event -&gt; UI Tree \uae30\ubc18 \uc774\ubca4\ud2b8 \uc804\ub2ec\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Dispatcher -&gt; UI Thread \uc811\uadfc\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\ub97c \uacf5\ubd80\ud560 \ub54c \ubaa8\ub4e0 Control\uacfc XAML \ubb38\ubc95\uc744 \uc678\uc6b0\ub294 \uac83\ubcf4\ub2e4 \uba3c\uc800 <strong>UI Tree, DataContext, Binding, DependencyProperty, MVVM\uc758 \uad00\uacc4<\/strong>\ub97c \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uad6d WPF \uac1c\ubc1c\uc758 \ud575\uc2ec\uc740 \ub2e4\uc74c \ud750\ub984\uc73c\ub85c \uc555\ucd95\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>UI -&gt; Binding -&gt; State -&gt; Logic -&gt; Data\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uadf8\ub9ac\uace0 \ub370\uc774\ud130\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc2dc<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Data -&gt; State -&gt; Binding -&gt; UI\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ub85c \ub3cc\uc544\uc628\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WPF\uc758 \uc218\ub9ce\uc740 \uae30\ub2a5\uc740 \uacb0\uad6d \uc774 \ud750\ub984\uc744 \uad6c\uc131\ud558\uace0 \ud655\uc7a5\ud558\uae30 \uc704\ud55c \ub3c4\uad6c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WPF \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac WPF\ub97c \ucc98\uc74c \ubcf4\uba74 XAML \ub54c\ubb38\uc5d0 \uc870\uae08 \ub0af\uc124\ub2e4. C# \ucf54\ub4dc\ub9cc\uc73c\ub85c UI\ub97c \ub9cc\ub4dc\ub294 \ubc29\uc2dd\uacfc \ub2ec\ub9ac \ud654\uba74 \uad6c\uc870\ub294 XAML\ub85c \uc791\uc131\ud558\uace0, \uc2e4\uc81c \ub3d9\uc791\uc740 C#\uc73c\ub85c \ucc98\ub9ac\ud55c\ub2e4. \uc5ec\uae30\uc5d0 DependencyProperty, Binding, DataContext, Command, Resource, Style, Template \uac19\uc740 \uac1c\ub150\uc774 \ubd99\ub294\ub2e4. \ucc98\uc74c\uc5d0\ub294 \uac01\uac01 \ubcc4\uac1c\uc758 \uae30\ub2a5\ucc98\ub7fc \ubcf4\uc778\ub2e4. \ud558\uc9c0\ub9cc WPF\uc758 \uad6c\uc870\ub97c \ud558\ub098\uc758 \ud750\ub984\uc73c\ub85c \ubcf4\uba74 \uc0dd\uac01\ubcf4\ub2e4 \ub2e8\uc21c\ud558\ub2e4. WPF\uc758 \ud575\uc2ec\uc740 UI\uc640 \ub370\uc774\ud130\ub97c \ubd84\ub9ac\ud558\uace0 Binding\uc744 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[],"class_list":["post-1643","post","type-post","status-publish","format-standard","hentry","category-client"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1643"}],"version-history":[{"count":3,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1643\/revisions"}],"predecessor-version":[{"id":1935,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1643\/revisions\/1935"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}